tabs: fix scrolling on home/end nav

reach · Feb 17, 2020 · 0134a4a · 0134a4a
1 parent 3f5cbd1
commit 0134a4a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 39 deletions.
diff --git a/packages/tabs/examples/basic.example.tsx b/packages/tabs/examples/basic.example.tsx
@@ -6,26 +6,31 @@ let name = "Basic (TS)";
 
 function Example() {
   return (
-    <Tabs>
-      <TabList>
-        <Tab>One</Tab>
-        <Tab>Two</Tab>
-        <Tab>Three</Tab>
-      </TabList>
+    <div>
+      <Tabs>
+        <TabList>
+          <Tab>One</Tab>
+          <Tab>Two</Tab>
+          <Tab>Three</Tab>
+        </TabList>
 
-      <TabPanels>
-        <TabPanel>
-          <h1>one!</h1>
-          <button>yo</button>
-        </TabPanel>
-        <TabPanel>
-          <h1>two!</h1>
-        </TabPanel>
-        <TabPanel>
-          <h1>three!</h1>
-        </TabPanel>
-      </TabPanels>
-    </Tabs>
+        <TabPanels>
+          <TabPanel>
+            <h1>one!</h1>
+            <button>yo</button>
+          </TabPanel>
+          <TabPanel>
+            <h1>two!</h1>
+          </TabPanel>
+          <TabPanel>
+            <h1>three!</h1>
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+      <div style={{ marginTop: 800 }}>
+        <p>Yo!</p>
+      </div>
+    </div>
   );
 }
 

diff --git a/packages/tabs/src/index.tsx b/packages/tabs/src/index.tsx
@@ -334,44 +334,43 @@ export const TabList = forwardRefWithAs<TabListProps, "div">(function TabList(
 
   // TODO: Determine proper behavior for Home/End key in RTL mode.
   function handleKeyDown(event: React.KeyboardEvent) {
-    const { key } = event;
-
-    // Bail if we aren't navigating
-    if (
-      !(
-        key === "ArrowLeft" ||
-        key === "ArrowRight" ||
-        key === "ArrowDown" ||
-        key === "Home" ||
-        key === "End"
-      )
-    ) {
-      return;
-    }
+    let { key } = event;
+    let flag = false;
+    let nextTab: number = null as any;
 
     let { first, last, prev, next } = getFocusIndices();
 
     switch (key) {
       case "ArrowRight":
-        onSelectTab(isRTL.current ? prev : next);
+        flag = true;
+        nextTab = isRTL.current ? prev : next;
         break;
       case "ArrowLeft":
-        onSelectTab(isRTL.current ? next : prev);
+        flag = true;
+        nextTab = isRTL.current ? next : prev;
         break;
       case "ArrowDown":
-        // don't scroll down
-        event.preventDefault();
+        flag = true;
         onFocusPanel();
         break;
       case "Home":
-        onSelectTab(first);
+        flag = true;
+        nextTab = first;
         break;
       case "End":
-        onSelectTab(last);
+        flag = true;
+        nextTab = last;
         break;
       default:
         return;
     }
+
+    if (flag) {
+      event.preventDefault();
+    }
+    if (nextTab != null) {
+      onSelectTab(nextTab);
+    }
   }
 
   useLayoutEffect(() => {