Prevent default when mousing down on a button that responds to clicks (#3709)

Antonio Scandurra created 2 years ago

This ensures that ancestors that track focus don't accidentally steal it
on mouse down, which was preventing the editor from deploying the code
actions menu.

Release Notes:

- N/A

Change summary

crates/gpui2/src/elements/div.rs                |  2 +-
crates/ui2/src/components/button/button_like.rs | 11 ++++++-----
crates/ui2/src/components/stack.rs              |  2 ++
3 files changed, 9 insertions(+), 6 deletions(-)

Detailed changes

crates/gpui2/src/elements/div.rs

@@ -1065,7 +1065,7 @@ impl Interactivity {
                     {
                         cx.focus(&focus_handle);
                         // If there is a parent that is also focusable, prevent it
-                        // from trasferring focus because we already did so.
+                        // from transferring focus because we already did so.
                         cx.prevent_default();
                     }
                 }

crates/ui2/src/components/button/button_like.rs

@@ -1,4 +1,4 @@
-use gpui::{relative, DefiniteLength};
+use gpui::{relative, DefiniteLength, MouseButton};
 use gpui::{rems, transparent_black, AnyElement, AnyView, ClickEvent, Div, Hsla, Rems, Stateful};
 use smallvec::SmallVec;
 
@@ -372,10 +372,11 @@ impl RenderOnce for ButtonLike {
             .when_some(
                 self.on_click.filter(|_| !self.disabled),
                 |this, on_click| {
-                    this.on_click(move |event, cx| {
-                        cx.stop_propagation();
-                        (on_click)(event, cx)
-                    })
+                    this.on_mouse_down(MouseButton::Left, |_, cx| cx.prevent_default())
+                        .on_click(move |event, cx| {
+                            cx.stop_propagation();
+                            (on_click)(event, cx)
+                        })
                 },
             )
             .when_some(self.tooltip, |this, tooltip| {

crates/ui2/src/components/stack.rs

@@ -5,6 +5,7 @@ use crate::StyledExt;
 /// Horizontally stacks elements.
 ///
 /// Sets `flex()`, `flex_row()`, `items_center()`
+#[track_caller]
 pub fn h_stack() -> Div {
     div().h_flex()
 }
@@ -12,6 +13,7 @@ pub fn h_stack() -> Div {
 /// Vertically stacks elements.
 ///
 /// Sets `flex()`, `flex_col()`
+#[track_caller]
 pub fn v_stack() -> Div {
     div().v_flex()
 }