Fix scrolling issue in Tab component when using arrow keys (#1584)

* prevent scrolling the page when using arrow keys in

* update changelog

* bump prettier

Does GitHub Actions have an incorrect cache somehow?

* use Active LTS in CI

Author: RobinMalfait

.github/workflows/main.yml

@@ -7,7 +7,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  NODE_VERSION: 12.x
+  NODE_VERSION: 16.x
 
 jobs:
   install:

package.json

@@ -47,7 +47,7 @@
     "jest": "26",
     "lint-staged": "^12.2.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.5.1",
+    "prettier": "^2.6.2",
     "prettier-plugin-tailwindcss": "^0.1.4",
     "rimraf": "^3.0.2",
     "tslib": "^2.3.1",

packages/@headlessui-react/CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve outside click of `Dialog` component ([#1546](https://github.com/tailwindlabs/headlessui/pull/1546))
 - Detect outside clicks from within `<iframe>` elements ([#1552](https://github.com/tailwindlabs/headlessui/pull/1552))
 - Improve Combobox input cursor position ([#1574](https://github.com/tailwindlabs/headlessui/pull/1574))
+- Fix scrolling issue in `Tab` component when using arrow keys ([#1584](https://github.com/tailwindlabs/headlessui/pull/1584))
 
 ## [1.6.4] - 2022-05-29
 

packages/@headlessui-react/src/components/tabs/tabs.tsx

@@ -366,18 +366,22 @@ let TabRoot = forwardRefWithAs(function Tab<TTag extends ElementType = typeof DE
         return focusIn(list, Focus.Last)
     }
 
-    return match(orientation, {
-      vertical() {
-        if (event.key === Keys.ArrowUp) return focusIn(list, Focus.Previous | Focus.WrapAround)
-        if (event.key === Keys.ArrowDown) return focusIn(list, Focus.Next | Focus.WrapAround)
-        return
-      },
-      horizontal() {
-        if (event.key === Keys.ArrowLeft) return focusIn(list, Focus.Previous | Focus.WrapAround)
-        if (event.key === Keys.ArrowRight) return focusIn(list, Focus.Next | Focus.WrapAround)
-        return
-      },
-    })
+    if (
+      match(orientation, {
+        vertical() {
+          if (event.key === Keys.ArrowUp) return focusIn(list, Focus.Previous | Focus.WrapAround)
+          if (event.key === Keys.ArrowDown) return focusIn(list, Focus.Next | Focus.WrapAround)
+          return
+        },
+        horizontal() {
+          if (event.key === Keys.ArrowLeft) return focusIn(list, Focus.Previous | Focus.WrapAround)
+          if (event.key === Keys.ArrowRight) return focusIn(list, Focus.Next | Focus.WrapAround)
+          return
+        },
+      })
+    ) {
+      return event.preventDefault()
+    }
   })
 
   let handleFocus = useEvent(() => {

packages/@headlessui-vue/CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Detect outside clicks from within `<iframe>` elements ([#1552](https://github.com/tailwindlabs/headlessui/pull/1552))
 - Only render the `Dialog` on the client ([#1566](https://github.com/tailwindlabs/headlessui/pull/1566))
 - Improve Combobox input cursor position ([#1574](https://github.com/tailwindlabs/headlessui/pull/1574))
+- Fix scrolling issue in `Tab` component when using arrow keys ([#1584](https://github.com/tailwindlabs/headlessui/pull/1584))
 
 ## [1.6.4] - 2022-05-29
 

packages/@headlessui-vue/src/components/tabs/tabs.ts

@@ -247,18 +247,23 @@ export let Tab = defineComponent({
           return focusIn(list, Focus.Last)
       }
 
-      return match(api.orientation.value, {
-        vertical() {
-          if (event.key === Keys.ArrowUp) return focusIn(list, Focus.Previous | Focus.WrapAround)
-          if (event.key === Keys.ArrowDown) return focusIn(list, Focus.Next | Focus.WrapAround)
-          return
-        },
-        horizontal() {
-          if (event.key === Keys.ArrowLeft) return focusIn(list, Focus.Previous | Focus.WrapAround)
-          if (event.key === Keys.ArrowRight) return focusIn(list, Focus.Next | Focus.WrapAround)
-          return
-        },
-      })
+      if (
+        match(api.orientation.value, {
+          vertical() {
+            if (event.key === Keys.ArrowUp) return focusIn(list, Focus.Previous | Focus.WrapAround)
+            if (event.key === Keys.ArrowDown) return focusIn(list, Focus.Next | Focus.WrapAround)
+            return
+          },
+          horizontal() {
+            if (event.key === Keys.ArrowLeft)
+              return focusIn(list, Focus.Previous | Focus.WrapAround)
+            if (event.key === Keys.ArrowRight) return focusIn(list, Focus.Next | Focus.WrapAround)
+            return
+          },
+        })
+      ) {
+        return event.preventDefault()
+      }
     }
 
     function handleFocus() {

yarn.lock

@@ -4326,10 +4326,10 @@ prettier-plugin-tailwindcss@^0.1.4:
   resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.8.tgz#ba0f606ed91959ede670303d905b99106e9e6293"
   integrity sha512-hwarSBCswAXa+kqYtaAkFr3Vop9o04WOyZs0qo3NyvW8L7f1rif61wRyq0+ArmVThOuRBcJF5hjGXYk86cwemg==
 
-prettier@^2.5.1:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
-  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
+prettier@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.2.tgz#e26d71a18a74c3d0f0597f55f01fb6c06c206032"
+  integrity sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==
 
 pretty-format@^26.1.0, pretty-format@^26.6.2:
   version "26.6.2"