sliptree/bootstrap-tokenfield

Support jQuery UI 1.12 AutoComplete

Opened this issue · 1 comments

Since jQuery UI 1.12, the menu widget renders different HTML. Instead of an a-tag inside 'li', it uses now a div-tag and the css-class for the selected element changed from 'ui-state-focus' to 'ui-state-active' (see http://jqueryui.com/upgrade-guide/1.12/#require-wrappers-for-each-menu-item and http://jqueryui.com/upgrade-guide/1.12/#use-consistent-styling-for-focused-and-active-items).

So, the if-statement in bootstrap-tokenfield.js at line 498 doesn't work anymore:

if (this.$input.data('ui-autocomplete') && this.$input.data('ui-autocomplete').menu.element.find("li:has(a.ui-state-focus), li.ui-state-focus").length) break

If you select an AutoComplete entry via 'tab' or 'enter' the entry is inserted twice in the input field. Maybe issue #308 is reporting the same problem.

Please change the jQuery-selector to 'li:has(div.ui-state-active)' or add this to the existing selector, if you still want to support older jQuery UI versions.

I'm having problems with jquery ui 1.12.1 and tokenfield 0.12, the dropdown list with the options is not styled, maybe due DOM changes, will try with an older jquery UI