select2
select2 copied to clipboard
When triggering events that change the selection, the dropdown UI keeps previous selections highlighted
When using multi select, and trigger events on select, the UI in the dropdown does not reflect the change. In this JSBin I have a selection with months. When you select January an event will be triggered to change the input to December, which works. However, the UI keeps the previous selections highlighted.
It seems like aria-selected
is not getting updated in the <li>
elements.
Steps to reproduce:
- Select February, March, April
- Then Select January
- December shows as expected but the UI in the dropdown stays the same
- If January is clicked again, the dropdown UI updates
Select2 version: 4.0.6 Browsers:
- Chrome version 113.0.5672.126 (Official Build) (arm64)
- Safari version 16.5 (18615.2.9.11.4) MacOS 13.4
Screenshots:
well it's an interesting one the thing is only happening when "closeOnSelect: false" parameter is given so the updated list is not re-rendered, the cheat way to solve it is to close and open it again
temporary solution
$('#example').val("DEC").trigger('change'); $('#example').select2('close').select2('open');
Thanks @VUcodes, this work around seemed to work. However, I do feel that adding the triggers for open/close
should be unnecessary, and the UI should update.
I found that this always happens on multi-selects. When clearing them normally $("#select2").val(null).trigger("change");
Per the documentation does not work. But using $("#select2").val(-100).trigger("change");
does work great.
I have exactly the same problem with "multiple" selection and closeOnSelect: false
. A workaround could be to close and reopen with the same scroll position, but I have not been able to successfully program that.
Reproduce the problem: https://jsfiddle.net/amrz429c/2/
Click on optgroup
to select options.
The options are selected when the dropdown menu is closed and opened after trigger("change")
, but if $("#selectDemo").select2('close')
is commented out, the options in the dropdown menu are not selected (updated) while the menu stays open.