data-toggle failing when an ID is a number

[TikiTDO]

I have a scenario with a bunch of data-toggle="collapse" href="5" etc... With the change to using document.querySelectors the lookup for such IDs is failing. This causes the data-toggle directive to no longer work for code that was working previously.

In my case this line was failing.

Please refer to this example in Chrome 68+ to get an idea of the failure scenario. With my setup I get the following output:

JS error: #1
JQ found: #1

JS found: #two2
JQ found: #two2

JS error: #3three
JQ found: #3three

JS not found: #invalid
JQ not found: #invalid

• Operating system and version: Arch Linux, OSX, RHEL, Windows 10
• Browser and version: Chrome 68
• Some possible fixes:
  1. Return to using jQuery for resolving selectors,
  2. Convert the first letter of the ID to a unicode escape string
  3. Use document.getElementById or document.getElementByClassName whenever possible

[coliff]

I don't think this is a Bootstrap issue. ID's can't start with a number
REF: https://css-tricks.com/ids-cannot-start-with-a-number/
I'd advise on changing your links to not start with a number.

[TikiTDO]

@coliff JQuery, and hence Bootstrap have worked with numeric IDs for literally years at this point. Sure, it's not standard compliant, but it's still rather strange to pull in a new patch version, and suddenly experience a bunch of silent failures on code that's been working for years. Certainly, I have advised my clients to change the IDs to use strings, but only after this issue got bubbled up to me after several people spent quite a bit of time on it. Many developers I work with aren't comfortable digging through library code to find the reason for a silent failure, and those that are tend to be pretty heavily loaded.

I understand the underlying reasoning, and I can respect the desire to follow standards. However, this is still something that can bite a anyone that's done IDs incorrectly quite severely. If this is not an issue that you believe should be fixed, it would be good to at least add a visual warning to direct people to the proper solution. This can be as simple as updating getSelectorFromElement to throw an error if the ID is not valid.

[Johann-S]

I'll make a patch to use getElementById when it's possible @TikiTDO 😉 thanks for your feedback !