search

select2 / select2

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
https://select2.org/
MIT License
25.84k stars 6.27k forks source link

When triggering events that change the selection, the dropdown UI keeps previous selections highlighted #6255

Open vluna opened 1 year ago

vluna commented 1 year ago

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:

Select2 version: 4.0.6 Browsers:

Screenshots: Screenshot 2023-05-24 at 4 33 44 PM

VUcodes commented 1 year ago

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');

vluna commented 1 year ago

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.

plutotom commented 11 months ago

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.

Lexachoc commented 10 months ago

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.