fix: Horizontal scrolling with keyboard (#561)

marc2332 · Apr 1, 2024 · 6372a1a · 6372a1a
1 parent 391821b
commit 6372a1a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 57 deletions.
diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs
@@ -104,11 +104,26 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
             1.0
         };
 
-        if !*clicking_shift.peek() {
-            let wheel_y = e.get_delta_y() as f32 * speed_multiplier;
+        let wheel_movement = e.get_delta_y() as f32 * speed_multiplier;
 
+        if *clicking_shift.peek() {
+            let scroll_position_x = get_scroll_position_from_wheel(
+                wheel_movement,
+                size.inner.width,
+                size.area.width(),
+                corrected_scrolled_x,
+            );
+
+            // Only scroll when there is still area to scroll
+            if *scrolled_x.peek() != scroll_position_x {
+                e.stop_propagation();
+                *scrolled_x.write() = scroll_position_x;
+            } else {
+                return;
+            }
+        } else {
             let scroll_position_y = get_scroll_position_from_wheel(
-                wheel_y,
+                wheel_movement,
                 size.inner.height,
                 size.area.height(),
                 corrected_scrolled_y,
@@ -123,27 +138,6 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
             }
         }
 
-        let wheel_x = if *clicking_shift.peek() {
-            e.get_delta_y() as f32
-        } else {
-            e.get_delta_x() as f32
-        } * speed_multiplier;
-
-        let scroll_position_x = get_scroll_position_from_wheel(
-            wheel_x,
-            size.inner.width,
-            size.area.width(),
-            corrected_scrolled_x,
-        );
-
-        // Only scroll when there is still area to scroll
-        if *scrolled_x.peek() != scroll_position_x {
-            e.stop_propagation();
-            *scrolled_x.write() = scroll_position_x;
-        } else {
-            return;
-        }
-
         focus.focus();
     };
 
@@ -181,10 +175,6 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
     };
 
     let onkeydown = move |e: KeyboardEvent| {
-        if !focus.is_focused() {
-            return;
-        }
-
         match &e.key {
             Key::Shift => {
                 clicking_shift.set(true);
@@ -193,6 +183,9 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
                 clicking_alt.set(true);
             }
             k => {
+                if !focus.is_focused() {
+                    return;
+                }
                 if !scroll_with_arrows
                     && (k == &Key::ArrowUp
                         || k == &Key::ArrowRight

diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs
@@ -162,11 +162,26 @@ pub fn VirtualScrollView<
             1.0
         };
 
-        if !*clicking_shift.peek() {
-            let wheel_y = e.get_delta_y() as f32 * speed_multiplier;
+        let wheel_movement = e.get_delta_y() as f32 * speed_multiplier;
 
+        if *clicking_shift.peek() {
+            let scroll_position_x = get_scroll_position_from_wheel(
+                wheel_movement,
+                inner_size,
+                size.area.width(),
+                corrected_scrolled_x,
+            );
+
+            // Only scroll when there is still area to scroll
+            if *scrolled_x.peek() != scroll_position_x {
+                e.stop_propagation();
+                *scrolled_x.write() = scroll_position_x;
+            } else {
+                return;
+            }
+        } else {
             let scroll_position_y = get_scroll_position_from_wheel(
-                wheel_y,
+                wheel_movement,
                 inner_size,
                 size.area.height(),
                 corrected_scrolled_y,
@@ -181,27 +196,6 @@ pub fn VirtualScrollView<
             }
         }
 
-        let wheel_x = if *clicking_shift.peek() {
-            e.get_delta_y() as f32
-        } else {
-            e.get_delta_x() as f32
-        } * speed_multiplier;
-
-        let scroll_position_x = get_scroll_position_from_wheel(
-            wheel_x,
-            inner_size,
-            size.area.width(),
-            corrected_scrolled_x,
-        );
-
-        // Only scroll when there is still area to scroll
-        if *scrolled_x.peek() != scroll_position_x {
-            e.stop_propagation();
-            *scrolled_x.write() = scroll_position_x;
-        } else {
-            return;
-        }
-
         focus.focus();
     };
 
@@ -233,10 +227,6 @@ pub fn VirtualScrollView<
     };
 
     let onkeydown = move |e: KeyboardEvent| {
-        if !focus.is_focused() {
-            return;
-        }
-
         match &e.key {
             Key::Shift => {
                 clicking_shift.set(true);
@@ -245,6 +235,10 @@ pub fn VirtualScrollView<
                 clicking_alt.set(true);
             }
             k => {
+                if !focus.is_focused() {
+                    return;
+                }
+
                 if !scroll_with_arrows
                     && (k == &Key::ArrowUp
                         || k == &Key::ArrowRight

diff --git a/crates/native-core/src/events.rs b/crates/native-core/src/events.rs
@@ -215,7 +215,7 @@ impl EventName {
 
     // Only let events that do not move the mouse, go through solid nodes
     pub fn does_go_through_solid(&self) -> bool {
-        matches!(self, Self::KeyDown)
+        matches!(self, Self::KeyDown | Self::KeyUp)
     }
 
     // Check if this event can change the hover state of a Node.