Hardcoded "width" of chosen-container moves field outside of mobile viewport

Hi!

I unfortunately cannot reproduce it on Chrome in a fresh Drupal 11 install with Olivero
(I guess there should not be a big difference between 11 and 10.3.2 regarding this issue)

And on mobile currently chosen will not apply 🐛 Chosen is not working on mobile devices? Closed: duplicate

In the other case is a note - mobile work in 4.x?

I try to create the repro plan soon with screenshots. But I cannot test on D11 as there is no xampp with PHP 8.3 available.

As far as I checked today https://github.com/JJJ/chosen (which is used in 4.x) also displays only a normal select on mobile.

The original reasons behind it can be found here https://github.com/harvesthq/chosen/pull/1388

I wonder if we can override the AbstractChosen.browser_is_supported = function() (which is defined in chosen.jquery.js)
somewhere around line 24 of the chosen.js in our module.
Because in that case we could make it configurable to show it or not for Android and iOS.

Well, all I have tested was decreasing my screen size by downsize my browser window. The site is currently only on my computer what makes real mobile tests a bit difficult. :-)

You can use https://developer.chrome.com/docs/devtools/device-mode
to simulate mobile.

huh... I played with it and found some problems.

1. Make the browser window as narrow as possible and the field overflows
2. Reload the narrow windows and the field gets resized to the available view port and does not overflow
3. Make the window wider... and now the title and form and descripton become all inline (huh?)

I have no idea how this works, but i tend to say there are breakpoint issues or a javascript event is not firing that resizes the form field.

Some screenshots:

I think at this point often websites implement their own design for these chosen elements.

We can always improve the default css of chosen, but need to be careful with it.

Of course the first issue here is to see if we can enable chosen on mobile screens, as without, mobile phones will anyways only see a standard HTML select.

Now it is possible in the 5.0.0-rc1 version to enable chosen library on Android and iOS devices.
https://www.drupal.org/project/chosen/releases/5.0.0-rc1 →

There is a "Allow mobile devices" option in the admin/config/user-interface/chosen settings page.

so then the first step is done.

The 5.0.0 version requires the library to be changed to the new fork: https://git.drupalcode.org/project/chosen/-/blob/5.0.x/README.md