Allow dropdowns to be opened by MouseDown event

jarvis394 · jarvis394 · commit 68d65019295b · 2025-07-09T23:38:13.000+03:00
Adds `ToggleOnMouseDown` boolean property for Dropdown and DropdownHeader.

The flag will use `MouseDownEvent` instead of `ClickEvent` for toggling the menu.
Dropdown handles `MouseUpEvent`, looking for active hovers and selecting preselected items
if the menu is hovered. Dropdown should close if cursor was released outside the menu and
should stay open if it is released on the `DropdownHeader`.
diff --git a/osu.Framework.Tests/Visual/UserInterface/TestSceneDropdown.cs b/osu.Framework.Tests/Visual/UserInterface/TestSceneDropdown.cs
@@ -29,12 +29,14 @@ public partial class TestSceneDropdown : ManualInputManagerTestScene
     {
         private const int items_to_add = 10;
 
-        [Test]
-        public void TestBasic()
+        [TestCase(false)]
+        [TestCase(true)]
+        public void TestToggleOnMouseDown(bool toggleOnMouseDown)
         {
             AddStep("setup dropdowns", () =>
             {
                 TestDropdown[] dropdowns = createDropdowns(2);
+                dropdowns.ForEach(dropdown => dropdown.ToggleOnMouseDown = toggleOnMouseDown);
                 dropdowns[1].AlwaysShowSearchBar = true;
             });
         }
@@ -64,6 +66,64 @@ public void TestSelectByUserInteraction()
                                                                         .Item as DropdownMenuItem<TestModel?>)?.Value?.Identifier == "test 2");
         }
 
+        [Test]
+        public void TestSelectByUserPressAndRelease()
+        {
+            TestDropdown testDropdown = null!;
+
+            AddStep("setup dropdown", () =>
+            {
+                testDropdown = createDropdown();
+                testDropdown.ToggleOnMouseDown = true;
+            });
+
+            toggleDropdownViaPress(() => testDropdown);
+            assertDropdownIsOpen(() => testDropdown);
+
+            AddStep("release on item 2", () =>
+            {
+                InputManager.MoveMouseTo(testDropdown.Menu.Children[2]);
+                InputManager.ReleaseButton(MouseButton.Left);
+            });
+
+            assertDropdownIsClosed(() => testDropdown);
+
+            AddAssert("item 2 is selected", () => testDropdown.Current.Value?.Equals(testDropdown.Items.ElementAt(2)) == true);
+            AddAssert("item 2 is selected item", () => testDropdown.SelectedItem.Value?.Identifier == "test 2");
+            AddAssert("item 2 is visually selected", () => (testDropdown.ChildrenOfType<Dropdown<TestModel?>.DropdownMenu.DrawableDropdownMenuItem>()
+                                                                        .SingleOrDefault(i => i.IsSelected)?
+                                                                        .Item as DropdownMenuItem<TestModel?>)?.Value?.Identifier == "test 2");
+        }
+
+        [Test]
+        public void TestUserPressAndReleaseOutsideMenu()
+        {
+            TestDropdown testDropdown = null!;
+
+            AddStep("setup dropdown", () =>
+            {
+                testDropdown = createDropdown();
+                testDropdown.ToggleOnMouseDown = true;
+            });
+
+            toggleDropdownViaPress(() => testDropdown);
+            assertDropdownIsOpen(() => testDropdown);
+
+            AddStep("preselect item 2", () =>
+                InputManager.MoveMouseTo(testDropdown.Menu.Children[2])
+            );
+            AddStep("move outside the menu", () =>
+                InputManager.MoveMouseTo(InputManager.ScreenSpaceDrawQuad.Centre)
+            );
+            AddStep("release mouse buttons", () =>
+                InputManager.ReleaseButton(MouseButton.Left)
+            );
+
+            assertDropdownIsClosed(() => testDropdown);
+
+            AddAssert("item 2 is not selected", () => testDropdown.Current.Value?.Equals(testDropdown.Items.ElementAt(2)) == false);
+        }
+
         [Test]
         public void TestSelectByCurrent()
         {
@@ -809,6 +869,12 @@ private void toggleDropdownViaClick(Func<TestDropdown> dropdown, string? dropdow
             InputManager.Click(MouseButton.Left);
         });
 
+        private void toggleDropdownViaPress(Func<TestDropdown> dropdown, string? dropdownName = null) => AddStep($"press {dropdownName ?? "dropdown"}", () =>
+        {
+            InputManager.MoveMouseTo(dropdown().Header);
+            InputManager.PressButton(MouseButton.Left);
+        });
+
         private void assertDropdownIsOpen(Func<TestDropdown> dropdown) => AddAssert("dropdown is open", () => dropdown().Menu.State == MenuState.Open);
 
         private void assertDropdownIsClosed(Func<TestDropdown> dropdown) => AddAssert("dropdown is closed", () => dropdown().Menu.State == MenuState.Closed);
diff --git a/osu.Framework/Graphics/UserInterface/Dropdown.cs b/osu.Framework/Graphics/UserInterface/Dropdown.cs
@@ -44,6 +44,15 @@ public bool AlwaysShowSearchBar
             set => Header.AlwaysShowSearchBar = value;
         }
 
+        /// <summary>
+        /// Whether this <see cref="Dropdown{T}"/> should open/close on OnMouseDown event.
+        /// </summary>
+        public bool ToggleOnMouseDown
+        {
+            get => Header.ToggleOnMouseDown;
+            set => Header.ToggleOnMouseDown = value;
+        }
+
         public bool AllowNonContiguousMatching
         {
             get => Menu.AllowNonContiguousMatching;
@@ -202,7 +211,7 @@ protected virtual LocalisableString GenerateItemText(T item)
         /// <summary>
         /// Puts the state of this <see cref="Dropdown{T}"/> one level back:
         ///  - If the dropdown search bar contains text, this method will reset it.
-        ///  - If the dropdown is open, this method wil close it.
+        ///  - If the dropdown is open, this method will close it.
         /// </summary>
         public bool Back()
         {
@@ -340,6 +349,27 @@ protected override bool OnKeyDown(KeyDownEvent e)
             return false;
         }
 
+        protected override void OnMouseUp(MouseUpEvent e)
+        {
+            // Only proceed with the flag
+            if (!ToggleOnMouseDown)
+                return;
+
+            // Close dropdown when cursor is released outside the menu
+            if (!Menu.IsHovered)
+            {
+                // Do not close the menu if we are releasing on the DropdownHeader
+                if (!Header.IsHovered)
+                    Menu.Close();
+                return;
+            }
+
+            // Cursor is inside the menu and possibly selecting an item,
+            // commit that selection and close the menu
+            ((IDropdown)this).CommitPreselection();
+            Menu.Close();
+        }
+
         private void collectionChanged(object sender, NotifyCollectionChangedEventArgs e)
         {
             switch (e.Action)
diff --git a/osu.Framework/Graphics/UserInterface/DropdownHeader.cs b/osu.Framework/Graphics/UserInterface/DropdownHeader.cs
@@ -30,6 +30,11 @@ public bool AlwaysShowSearchBar
             set => SearchBar.AlwaysDisplayOnFocus = value;
         }
 
+        /// <summary>
+        /// Whether parent dropdown <see cref="Dropdown{T}"/> should open/close on OnMouseDown event.
+        /// </summary>
+        public bool ToggleOnMouseDown { get; set; }
+
         protected internal DropdownSearchBar SearchBar { get; }
 
         public Bindable<string> SearchTerm => SearchBar.SearchTerm;
@@ -95,14 +100,14 @@ protected DropdownHeader()
                     Anchor = Anchor.CentreLeft,
                     Origin = Anchor.CentreLeft,
                     RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y
+                    AutoSizeAxes = Axes.Y,
                 },
                 SearchBar = CreateSearchBar(),
-                new ClickHandler
+                new UIEventHandler
                 {
                     RelativeSizeAxes = Axes.Both,
-                    Click = onClick
-                }
+                    UIEventHandle = handleUIEvent
+                },
             };
         }
 
@@ -135,19 +140,68 @@ private void updateState()
         }
 
         /// <summary>
-        /// Handles clicks on the header to open/close the menu.
+        /// Handles clicks and mouse events on the header to open/close the menu.
         /// </summary>
-        private bool onClick(ClickEvent e)
+        private bool handleUIEvent(UIEvent e)
         {
             // Allow input to fall through to the search bar (and its contained textbox) if there's any search text.
             if (SearchBar.State.Value == Visibility.Visible && !string.IsNullOrEmpty(SearchTerm.Value))
                 return false;
 
+            switch (e)
+            {
+                case MouseDownEvent mouseDown:
+                    return onMouseDown(mouseDown);
+
+                case ClickEvent click:
+                    return onClick(click);
+
+                default:
+                    return false;
+            }
+        }
+
+        /// <summary>
+        /// Handles clicks on the header to open/close the menu.
+        /// </summary>
+        private bool onClick(ClickEvent e)
+        {
+            // No need to handle dropdown as with this flag it has already been toggled by `onMouseDown` handler
+            if (ToggleOnMouseDown)
+            {
+                // Without this check, when dropdown is opened by clicking outside `SearchBar`,
+                // focus will be lost on `onClick` event -- therefore, closing dropdown.
+                // We need to prevent that by manually focusing on the `SearchBar.textBox`.
+                if (dropdown.MenuState == MenuState.Open)
+                    dropdown.ChangeFocus(SearchBar.Child);
+                return false;
+            }
+
             // Otherwise, the header acts as a button to show/hide the menu.
             dropdown.ToggleMenu();
             return true;
         }
 
+        /// <summary>
+        /// Handles mouse presses on the header to open/close the menu.
+        /// </summary>
+        private bool onMouseDown(MouseDownEvent e)
+        {
+            // Only proceed with the flag
+            if (!ToggleOnMouseDown)
+                return false;
+
+            // Only allow dropdown to toggle when pressing primary mouse button
+            if (e.Button != MouseButton.Left)
+                return false;
+
+            // Otherwise, the header acts as a button to show/hide the menu.
+            dropdown.ToggleMenu();
+
+            // And importantly, when the menu is closed as a result of the above toggle, block the search bar from receiving input.
+            return dropdown.MenuState == MenuState.Closed;
+        }
+
         public override bool HandleNonPositionalInput => IsHovered;
 
         protected override bool OnKeyDown(KeyDownEvent e)
@@ -204,10 +258,11 @@ public enum DropdownSelectionAction
             LastVisible
         }
 
-        private partial class ClickHandler : Drawable
+        private partial class UIEventHandler : Drawable
         {
-            public required Func<ClickEvent, bool> Click { get; init; }
-            protected override bool OnClick(ClickEvent e) => Click(e);
+            public required Func<UIEvent, bool> UIEventHandle { get; init; }
+
+            protected override bool Handle(UIEvent e) => UIEventHandle(e);
         }
     }
 }
