select2 not working in Chrome 73

[ghost]

I have a lot of pages with different input types, all seem to be working except select2. Just updated Chrome to 73 and issue started, on multiple machines. (mac and pc) All my users started reporting, but for hours I could not find reproduce, then I noticed I was on older version of Chrome, updated like the rest, and the issue started on my machine.

Click select2 box, and dropdown shows, but then instantly the field behind it goes away, similar to a blur event that cancels the xeditable interaction. The following action of selecting an option from the drop down does nothing. Happens on both inline and popup versions.

Oddly enough it seems the demo page is also affected Select2 (dropdown mode) https://vitalets.github.io/x-editable/demo-bs3.html

[vitalets]

I've made some research - it looks like Chrome changed something in how mouse events are triggered while dynamic elements created:

• Before chrome 73 mousedown triggered on .select2-choice and mouseup triggered on .select2-drop-mask did not produce click event.
• Since chrome 73 the same steps produce click event on document.body (!).

I've also checked this issue in:

• Firefox 66 - does not reproduce
• Safari 12 - reproduced

The quick fix is to delay showing .select2-drop-mask for a small time. Change this line in select2.js file. From:

// show the elements
mask.show();

To:

// show the elements
setTimeout(function () { mask.show(); }, 500);

Please let me know if it works for you! I think I will make a patch as select2 is very popular functionality in x-editable.

[ghost]

Workaround did the trick for me. As far as I can tell its working as expected now. My users are thankful to have their select2 search back!

[ghost]

Very strange side affect with the work around... when you click too fast in a select box, it basically kills all events on the page and it has to be refreshed. Cant click links, mouse over stuff, nothing. If you go slow and make sure not to accidentally double click in the select2 box, it works fine.

I replaced the original line in the select2 file and function goes back to normal.

[vitalets]

@onqaz could you make a video?

[ghost]

Zipped video select2 bug.zip

at 0:27 Im double clicking in the box which causes the issue. It happens pretty easily and Im duplicating it on multiple machines. All with Chrome 73 and the work around in place. If you take your time and click slowly in and out of the select2 boxes things work as expected. But you know these users they get to know what they are doing and move through the forms pretty quick and they cause the error state almost every time.

[elemwm]

Hi, I had the same problem and I tried a different approach, Instead of changing the code of select2.js I tried to update to the 3.5.4 version and it seems to work perfectly. I hope it can help you.

Tested on:

• Safary 12.0.3
• Firefox 66.0.2
• Chrome 73.0.3683.86

[ghost]

Hey elemwm is on to something. This worked for me as well. I was using select2 3.4.4 file with the work around that was suggested. After swapping out select2 for ver 3.5.4 without the workaround and both normal select2 boxes and xeditable select2 boxes work as expected now. No signs of the strange event killer issue.

[vitalets]

Thank you! I will change select2 version in internal tests and add to docs as recommended.

[NaiveCAI]

FYI:

I met the same error when using select2 plugin.

After updated it to the latest version everything works well.