Apostrophe in input / select id prevents the selectize widget from loading

[mflorea]

I did:

• [x] Search for if my issue has already been submitted
• [x] Make sure I'm reporting something precise that needs to be fixed
• [x] Give my issue a descriptive and concise title
• [x] Create a minimal working example on JsFiddle or Codepen (or gave a link to a demo on the Selectize docs)
• [x] Indicate precise steps to reproduce in numbers and the result, like below

The selectize widget doesn't load if the id of the target input contains an apostrophe. Even if that makes the id invalid (XML-wise), it shouldn't break selectize because if it works without an id it should also work with an invalid id. The selectize widget doesn't depend on the input id to function correctly. "Fixing" the input / select id is not always easy because the code that loads the selectize widget might not control the input HTML (i.e. the code that loads the selectize widget is part of an extension / plugin).

Steps to reproduce:

See https://jsfiddle.net/04jfthgk/1/ . It's enough to set the input / select id to something like foo'bar.

Expected result:

The selectize widget should load. If there is some feature of the selectize widget that requires / expects a valid id then that feature should degrade nicely.

Actual result:

The selectize widget doesn't load and this exception is thrown:

Uncaught Error: Syntax error, unrecognized expression: label[for='foo'bar']

The problem is with this line:

$("label[for='"+inputId+"']").attr('for', inputId + '-selectized');

The input id is not escaped and thus the produced CSS selector can easily be broken if the id contains an apostrophe.

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days