[Advanced Select] Dropdown not closing in Chrome

[oliverhaas]

Summary

The advanced select dropdown stays open on Chrome when trying to close it.

Steps to Reproduce

1. Go to https://preline.co/docs/advanced-select.html with Chrome (version see below).
2. Open a advanced select dropdown.
3. Try to close it again with unfocus or button click.

I have two similar but independent Ubuntu 22.04 systems with Chrome 127.0.6533.72 and a Windows system with Chrome 127.0.6533.73, all exhibit this behavior. Firefox and Chromium (126.0.X) do not seem to have this issue. Chrome version 126.0.X does not have the issue either.

EDIT: Checked out 128.0.X (unstable) as well, and the issue persists. So I don't think the problem will disappear on Chrome's end.

Demo Link

https://preline.co/docs/advanced-select.html

Expected Behavior

Dropdown should disappear again on unfocus, button click, etc.

Actual Behavior

Dropdown stays open and glitched out, slightly shifted (margin changed).
I can see that the hidden class is not set, but some other attributes are changed.

Screenshots

Normal opening behavior:

But stays open after trying to close it:

[oliverhaas]

I've maybe found the cause of the problem.

At some point the HSSelect uses afterTransition() inside the close() function, and the afterTransition() function makes a check whether there is a transition or not

const afterTransition = (el: HTMLElement, callback: Function) => {
	const handleEvent = () => {
		callback();

		el.removeEventListener('transitionend', handleEvent, true);
	};
	const hasTransition =
		window.getComputedStyle(el, null).getPropertyValue('transition') !==
		(navigator.userAgent.includes('Firefox') ? 'all' : 'all 0s ease 0s');

	if (hasTransition) el.addEventListener('transitionend', handleEvent, true);
	else callback();
};

The value of window.getComputedStyle(el, null).getPropertyValue('transition') apparently changed from 'all 0s ease 0s' to just 'all' in Chrome 127.0.X (so just like Firefox now)?!

EDIT:
To my knowledge checking for a transition duration and delay should be more robust:

const duration = parseFloat(window.getComputedStyle(t).getPropertyValue("transition-duration")) || 0;
const delay = parseFloat(window.getComputedStyle(t).getPropertyValue("transition-delay")) || 0;
const hasTransition = (delay + duration) > 0;

Or it might be better to go directly for setTimeout(), since transitionend seems to be frickle...

[jahaganiev]

Hey @oliverhaas - could you make a video record of the issue? At the time being, our team isn't able to reproduce the issue. Thanks!

[oliverhaas]

Screencast.from.26.07.2024.06.20.15.webm

You can't see in the video that I'm furiously clicking in multiple places to try to close the select ;). But there is not much to see. Dropdown opens, and can't be closed.

I'm quite surprised that you can't reproduce the issue.

Are you on the current Chrome version (127.0.X)?
Did you go to https://preline.co/docs/advanced-select.html and try to open and close a select?

That's how I could reproduce it on 7 machines up to now (Windows, Mac, Ubuntu), and by three people independently. You can see your Chrome version in the menu (Help -> About Google Chrome). Don't forget to restart Chrome. The update just shipped 3 days ago and many people will not have restarted their browser yet, so they are still on 126.0.X.

If you want to make a quick call, I'm open to that as well (I'm in GMT+2) :).

[oliverhaas]

@jahaganiev To me it looks like that this affects all Chromium based browser starting with 127.0.X, and all websites using Preline HSSelect, and basically out of nowhere, so this is fairly serious. I'm not aware of anything I could be still missing, and would be happy to be wrong.

[f-tepel]

Hi @jahaganiev ,
same issue here. Update to latest Chrome version destroyed all our selects.

[olegpix]

@f-tepel @oliverhaas Hi,
We have released a hot-fix due to the Chrome update. Please update to Preline 2.4.1

[jahaganiev]

Hey @oliverhaas - once again, thanks for pointing out and reporting the issue with details. It helped our team quickly fix the issue. Appreciate it much!