vue-scrollactive icon indicating copy to clipboard operation
vue-scrollactive copied to clipboard

Throws Document Query Selector error if hash starts with Number and the webpage is hard refreshed with such hash in URL

Open ManasMadrecha opened this issue 4 years ago • 1 comments

Issue

Hi,

I am using Nuxt with its markdown Content module. I prefer to add numbering in my markdown's headings, so accordingly their IDs also start with number, e.g., 1-1-some-heading.

If I hard refresh some URL in my website that has such hash (e.g., https://example.com/link#1-1-some-heading), then vue-scrollactive` throws an error of Document Query Selector. I guess it's because CSS selectors can't start with number.

However, if I use vue-scrollactive in my page's TOC with :modifyURL: false, and click on such headings that have ID starting with number, then no error is thrown. So, if I don't refresh the page, I can properly use this plugin.

The website breaks only if I refresh the page or directly go to the page, and only if the URL of the page has hash in it that starts with number.

Also, this causes a huge problem as I can't link to these headings in my other markdown, because then the URL will have such hash, and the website breaks.

Can this be resolved?

Problem with plugin

Without vue-scrollactive, the website doesn't break even if I the URL has hash starting with number, and I refresh it or go to it directly. So, the issue lies with the plugin.

ManasMadrecha avatar Dec 26 '21 00:12 ManasMadrecha

Recommended:

Use document.querySelector('[id="someid"]') instead of ('#someid')

ManasMadrecha avatar Jan 17 '22 21:01 ManasMadrecha