From ec84c72ef955d3f9be1a908bdd657f54077950d2 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Mon, 13 Jun 2022 15:54:18 +0200
Subject: [PATCH] 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
---
 .github/workflows/main.yml                    |  2 +-
 package.json                                  |  2 +-
 packages/@headlessui-react/CHANGELOG.md       |  1 +
 .../src/components/tabs/tabs.tsx              | 28 ++++++++++--------
 packages/@headlessui-vue/CHANGELOG.md         |  1 +
 .../src/components/tabs/tabs.ts               | 29 +++++++++++--------
 yarn.lock                                     |  8 ++---
 7 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 2122e99..288ec97 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -7,7 +7,7 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  NODE_VERSION: 12.x
+  NODE_VERSION: 16.x
 
 jobs:
   install:
diff --git a/package.json b/package.json
index b249e00..ed0d5c1 100644
--- a/package.json
+++ b/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",
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index afb18d9..b0bbeaa 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/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
 
diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
index cf83340..01ce338 100644
--- a/packages/@headlessui-react/src/components/tabs/tabs.tsx
+++ b/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(() => {
diff --git a/packages/@headlessui-vue/CHANGELOG.md b/packages/@headlessui-vue/CHANGELOG.md
index 2cc90c4..3a84ef6 100644
--- a/packages/@headlessui-vue/CHANGELOG.md
+++ b/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
 
diff --git a/packages/@headlessui-vue/src/components/tabs/tabs.ts b/packages/@headlessui-vue/src/components/tabs/tabs.ts
index afe6d4e..3699a37 100644
--- a/packages/@headlessui-vue/src/components/tabs/tabs.ts
+++ b/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() {
diff --git a/yarn.lock b/yarn.lock
index 5bf11e6..ca882f3 100644
--- a/yarn.lock
+++ b/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"