select2 icon indicating copy to clipboard operation
select2 copied to clipboard

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

Open vluna opened this issue 1 year ago • 4 comments

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: Screenshot 2023-05-24 at 4 33 44 PM

vluna avatar May 24 '23 20:05 vluna

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

VUcodes avatar May 26 '23 04:05 VUcodes

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.

vluna avatar May 31 '23 12:05 vluna

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.

plutotom avatar Aug 16 '23 17:08 plutotom

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.

Lexachoc avatar Sep 18 '23 17:09 Lexachoc