Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vluna opened this issue May 24, 2023 · 4 comments

Comments

@vluna
Copy link

vluna commented May 24, 2023

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

@VUcodes
Copy link

VUcodes commented May 26, 2023

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
Copy link
Author

vluna commented May 31, 2023

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
Copy link

plutotom commented Aug 16, 2023

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
Copy link

Lexachoc commented Sep 18, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants