Open dropdowns in BeatmapFilterControl on mouse down event

[jarvis394]

I recently thought about why dropdown items look harder to hit and slower to navigate in lazer (for me) and came to two conclusions:

1. Cursor is way bigger than menu item by default
2. Dropdown menu opens on onMouseDown event in stable and apply last hovered item on onMouseUp, making it easier to quickly select items (collections, filters, etc.)

While first reason might be user-specific (and you can already configure menu cursor size), second one looks like an issue of stable behaviour mismatch. Here is the comparison between the clients:

osu-dropdown.mov

Everything described below should apply ONLY to dropdown menus on fixed surfaces – like BeatmapFilterControl component.

Expected behaviour

Desktop

• Dropdowns open immidiately when pressing down (onMouseDown) or after clicking once
• Dropdown item is clicked when releasing (onMouseUp) after opening dropdown menu with a press
• Dropdown item is immidiately clicked when pressing down
• User doesn't scroll current screen by pressing down on dropdown menu surface and moving cursor
• User scrolls current opened dropdown menu by pressing down and moving cursor within menu boundaries

Touch devices

Same as desktop, see above

Current behaviour

Desktop

• Dropdowns open after clicking once
• Dropdown item is clicked after clicking once (onClick)
• User scrolls current screen by pressing down on dropdown menu surface and moving cursor
• User scrolls current opened dropdown menu by pressing down and moving cursor within menu boundaries

Touch devices

Same as desktop, see above

Additional notes

1. Proposed expected behaviour not only matches stable but also Android and iOS guidelines for dropdown menus.
   Couldn't find specific note on their website but on MacOS you can try holding right click and release on an item in the context menu and on Android you can hold menu button in Chrome and select items by moving your finger.
2. This should definetly be an optional parameter for dropdowns as in settings overlay, for example, I would be annoyed by scrolling with tablet and accidentally opening menus (and worse, selecting items).
   BeatmapFilterControl could be just one of many components where this behaviour is needed, haven't checked it throughout the UI.

[peppy]

I'd like to see this happen (it's how dropdowns work on macOS).

[jarvis394]

@peppy I've got a try on a basic implementation and have some concerns. But before that, take a look at the results below:

Framework and game tests

Recording.2025-06-12.233036.mp4

Recording.2025-06-13.000441.mp4

Code: jarvis394@c118861#diff-a2e872583efe781b079b0ad350ed2c838c8c98c51c6bb8bff632312a8b4b6785

When the initial mouse down occurs outside SearchBar.textBox (e.g., by clicking on the left label in a ShearedDropdown), we need to return focus after OnClick to the text input. Otherwise, the focus will be lost and the dropdown will close.

I tried a hacky fix for this in DropdownHeader.onClick, and it works when the click event occurs within the dropdown header hitbox. However, if the pointer moves during the process outside of the dropdown, no click event will fire on the dropdown header, and the fix won't work (see game test screencast, last 5 seconds).

So, before trying to hack it even more,

1. Which behaviour for closing menus should we choose:
   • match MacOS behaviour – on mouse up outside the dropdown, close. No focusing hacks required.
   • match stable behaviour – on mouse up outside the dropdown, stay open. Would require restoring focus on textBox.
2. Is there a framework solution for keeping the focus inside the text box? It feels like it should be solved by using ChangeFocusOnClick or similar props, but nothing I've tried worked.

I’m not very familiar with C#, but would be happy to start a PR for this feature. If someone more experienced wants to take over or review it, feel free!

[peppy]

Which behaviour for closing menus should we choose:

I'd close the dropdown if mouse is released outside.

Is there a framework solution for keeping the focus inside the text box? It feels like it should be solved by using ChangeFocusOnClick or similar props, but nothing I've tried worked.

Very hard to answer this without digging quite deep. Focus is a tough one to get right (and to even understand how things are right now).

[minetoblend]

I think context menus are also a great candidate for this behaviour

2025-07-10.01-34-24.mp4