BUG: Dimension Switcher closes on option hover

[gjwnc]

regression from #3451

Description

In Chrome or Brave and Neos 8.3 the new dimension switcher closes itself when an unselected option gets highlighted by hovering over it and the drop down cannot be reopened. It is working in Firefox though.

Steps to Reproduce

1. Open the Dimension Switcher in the top bar
2. Without clicking, just hover over an unselected dimension option. The Dimension Switcher immediately closes itself
3. Click on the Open/Close icon trying to reopen the Dimension Switcher. This also does not work
4. Click somewhere else to finally "reset" the Dimension Switcher to be able to repeat step 1.

The video is recorded on Ubuntu 22.04.2 LTS and Chrome Version 113.0.5672.63 (Official Build) snap (64-bit).
This behaviour is also reported from colleagues running Chrome or Brave on Mac OS.

Expected behavior

Able to select and click a dimension to switch to the dimension.

Actual behavior

Screencast.from.2023-05-17.14.46.33.webm

Note: In the video, I clicked on the Dimension Switcher open/close icon, multiple times to demonstrate that it does not reopen again.

Affected Versions

Neos: 8.3.2

UI: 8.3.0

Related: #3413, #3451

[mhsdesign]

I could reproduce it. The bug only appears if 10 or more items are present in the list (because then new functionality is enabled like the search bar and so forth).

Mac os 13.4.1 + Chrome Version 114.0.5735.198 (Offizieller Build) (arm64)

Bildschirmaufnahme.2023-07-06.um.13.57.18.mov

Bildschirmaufnahme.2023-07-06.um.14.02.46.mov

On firefox it works a bit better but is also totally buggy lol.

Mac os 13.4.1 + Firefox 113.0.2 (64-Bit)

Bildschirmaufnahme.2023-07-06.um.14.03.59.mov

[mhsdesign]

i just found a fix to make it useable again: #3565
this comes with the drawback that we dont display a search box for now anymore for more than 9 entries. I still think its a better than to have it totally broken for the next weeks.

[JamesAlias]

I had a look into the Bug as well and I think I'm close to the root cause.

The problem is,
when ShallowDropDownContents is re-evaluated
then in Chrome the elementBoundingBox.top changes from 0 to -0.25
then the isInScrollView function (see image) returns false
then the style of the ShallowDropDownContents is changed to { display: 'none' }

In Firefox the elementBoundingBox.top stays at 0, so the condition is still true.

I'm just not sure yet, what causes this shift of -0.25 in Chrome.

Edit1: The height changes by 0.5 from 40 to 40.5. 0.25 is the half of this 🤔 This is why the max-height fix of the PR fixes the issue. getting closer...

[mhsdesign]

Thank you so much @JamesAlias for investigating the real issue and not just fixing it hackily like me in #3565

i just talked to @grebaldi about this bug and he said the select box has been misused as dimension selector. Also we agreed that it might be a questionable feature to have the search box shown in the dimension selector - say you have other problems when having 10+ dimensions ^^

but id like to discuss the dimension selector and also hear your opinion. In case you find the fix and think its valid to have a search-box feel free to revert my change.

[mhsdesign]

Reopening so we can fix this properly ;)