Select2 breaks with Chrome version 127

Is this a bug?
#1

Hi guys.

I have this app that was built like, a long time ago… something around 5 years.
It uses select2 (I’m trying to find the version but there’s nothing about it on the code).

After Chrome updates to version 127 on Windows, Android and Linux, the select that used to give the possibility to type a search simply does not work anymore.

No error on console, no alerts, nothing…

What do you recomend me to do? This is super old application, I would like to avoid do something that requires change the entire app.select2

Update:
It only happens in modals, problem is solved removing the tab-index code or switching to zero. I still making tests…

Update 2:
Tab-index was not the problem. I attached the select2 to the modal, and now works, but gets displaced…

2 Likes
#2

We’re having the same issue. We’ve been working on it all day but haven’t solved it yet. Have you made any more progress?

1 Like
#3

Yes.
You can try to attach the dropdown to the modal when instantiating the select2. Insert this option:
dropdownParent: $(’#’ + modalId),

However, if you scroll the parent’s body or the modal, the dropdown launches away from the select field.

I’m in this issue for about 5 hours… everything I do leads to another side effect…

image
image589×709 29.7 KB

1 Like
#4

Hey guys! I’m facing the same issue, one thing I noticed was that it doesn’t occur in Edge browser. If anyone finds the solution, share it with us! I’ll do the same if I can solve it.

#5

We finally solved it. We added the dropdownParent option as you suggested. Using the modalId we had the same issue as you where it would get displaced.
We fixed that by using the id of the select element’s direct parent div, instead of the modalId.
I hope it works for you, too!

#6

Hi. Nice.

Can you display the code so I can try here?
I tried so many things, the closest div for example, but none of the options worked…

#7

The problem seems to have been fixed in chrome 128.

#8

I can confirm that this is true! Thank you so much for inform us.

#10

Oh no… the problem is back with version 130: you can’t type anymore…

#11

We have also encountered this issue after users were upgraded to Chrome/Edge v130 and conducted some investigation. It seems related to Chrome’s scaling of modal forms.

There are a few possible workarounds:

  • If you’re using a larger monitor, where the modal fits within the screen height, it may display correctly.
  • Adjusting the browser’s zoom setting can help. Reducing the zoom level (e.g., around 50%) so that the entire dialog is visible may resolve the issue.

We have one early report indicating that Chrome version 131 (released yesterday) may address this, although we haven’t had the opportunity to confirm this yet.

#12

I have test this myself on Edge v131 - it does not fix the issue as reported above. I assume it also does not work on Chrome v131.

The zoom out workaround does still work however.