Multi-level nested options not selectable in Chrome

It appears that a newer version of Chrome (I’m running version 46.0.2490.80 (64-bit)) has broken the ability to nest deeper than one level of optgroups. I do not see this issue in Safari 9.0 (10601.1.56.2) or Firefox 41.0.2. I’m also running OS X 10.10.5.

Here is an example JS Fiddle illustrating the issue. In Chrome, I can select the children successfully but am unable to select any grandchildren or deeper. In the linked JS Fiddle example, I am unable to select Option 8 or 10.

I have partially solved this issue by changing a line in ArrayAdapter.prototype.convertToOptions from Utils.appendMany($option, $children); to $options.push($children);. This basically prevents the underlying select from nesting it’s own optgroups, but it appends any nested options to the bottom of the rendered list on select. Still trying to work through that.

[malefice]

@yahyaerturan, the fork works, though I really hope the fix will be merged into the main repo.

[alexweissman]

This is now documented: https://select2.org/options#hierarchical-options

Only a single level of nesting is allowed per the HTML specification. If you nest an <optgroup> within another <optgroup>, Select2 will not be able to detect the extra level of nesting and errors may be triggered as a result.