Only e.preventDefault when Dropdown is active

.github/workflows/run-linting.yml

@@ -2,9 +2,8 @@ name: Run Linter
 
 on:
   pull_request:
-    branches:
-      - main
+    branches: [main, develop]
 
 jobs:
   linting:
-    uses: yext/slapshot-reusable-workflows/.github/workflows/run-linting.yml@v1
+    uses: yext/slapshot-reusable-workflows/.github/workflows/run-linting.yml@v1

.github/workflows/run-tests.yml

@@ -17,4 +17,4 @@ jobs:
       build_script: |
         npm i -D [email protected] [email protected]
         npm run build
-      node_matrix: '["14.x", "16.x", "18.x"]'
+      node_matrix: '["14.x", "16.x", "18.x"]'

.github/workflows/sync_develop_and_main.yml

@@ -0,0 +1,11 @@
+name: Create PR from main to develop
+
+on:
+  push:
+    branches: main
+
+jobs:
+  call_sync_develop_and_main:
+    uses: yext/slapshot-reusable-workflows/.github/workflows/sync_develop_and_main.yml@v1
+    secrets:
+      caller_github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/version_update.yml

@@ -0,0 +1,11 @@
+name: Update package version for release & hotfix branches
+
+on:
+  push:
+    branches: [release/*, hotfix/*]
+
+jobs:
+  call_version_update:
+    uses: yext/slapshot-reusable-workflows/.github/workflows/version_update.yml@v1
+    secrets:
+      caller_github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/wcag_test.yml

@@ -2,8 +2,7 @@ name: WCAG tests
 
 on:
   pull_request:
-    branches:
-      - main
+    branches: [main, develop]
 
 jobs:
   call_wcag_test:

package.json

@@ -135,7 +135,6 @@
   "dependencies": {
     "@microsoft/api-documenter": "^7.15.3",
     "@microsoft/api-extractor": "^7.19.4",
-    "@restart/hooks": "^0.4.5",
     "@restart/ui": "^1.0.1",
     "@tailwindcss/forms": "^0.5.0",
     "@yext/analytics": "^0.2.0-beta.3",

src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,6 @@
 import { createElement, isValidElement, PropsWithChildren, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { DropdownContext, DropdownContextType } from './DropdownContext';
 import { InputContext, InputContextType } from './InputContext';
-import useGlobalListener from '@restart/hooks/useGlobalListener';
 import useRootClose from '@restart/ui/useRootClose';
 import { FocusContext, FocusContextType } from './FocusContext';
 import { v4 as uuid } from 'uuid';
@@ -101,49 +100,57 @@ export function Dropdown(props: PropsWithChildren<DropdownProps>): JSX.Element {
     toggleDropdown(false);
   }, { disabled: !isActive });
 
-  useGlobalListener('keydown', e => {
-    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-      e.preventDefault();
-    }
-
-    if (!isActive) {
-      return;
-    }
+  useEffect(() => {
+    const dropdownContainer = containerRef.current;
+    dropdownContainer?.addEventListener('keydown', handleKeyDown);
+    return () => {
+      dropdownContainer?.removeEventListener('keydown', handleKeyDown);
+    };
 
-    if (e.key === 'ArrowDown') {
-      if (alwaysSelectOption && focusedIndex === items.length - 1) {
-        updateFocusedItem(0);
-      } else {
-        updateFocusedItem(focusedIndex + 1);
+    function handleKeyDown(e: globalThis.KeyboardEvent) {
+      if (!isActive) {
+        return;
       }
-    } else if (e.key === 'ArrowUp') {
-      if (alwaysSelectOption && focusedIndex === 0) {
-        updateFocusedItem(items.length - 1);
-      } else {
-        updateFocusedItem(focusedIndex - 1);
+
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
       }
-    } else if (e.key === 'Tab' && !e.shiftKey) {
-      if (items.length !== 0) {
-        if (focusedIndex >= items.length - 1) {
-          updateFocusedItem(-1);
-          toggleDropdown(false);
+
+      if (e.key === 'ArrowDown') {
+        if (alwaysSelectOption && focusedIndex === items.length - 1) {
+          updateFocusedItem(0);
         } else {
           updateFocusedItem(focusedIndex + 1);
+        }
+      } else if (e.key === 'ArrowUp') {
+        if (alwaysSelectOption && focusedIndex === 0) {
+          updateFocusedItem(items.length - 1);
+        } else {
+          updateFocusedItem(focusedIndex - 1);
+        }
+      } else if (e.key === 'Tab' && !e.shiftKey) {
+        if (items.length !== 0) {
+          if (focusedIndex >= items.length - 1) {
+            updateFocusedItem(-1);
+            toggleDropdown(false);
+          } else {
+            updateFocusedItem(focusedIndex + 1);
+            e.preventDefault();
+          }
+        }
+      } else if (e.key === 'Tab' && e.shiftKey) {
+        if (focusedIndex > 0 || (!alwaysSelectOption && focusedIndex === 0)) {
+          updateFocusedItem(focusedIndex - 1);
           e.preventDefault();
+        } else {
+          updateFocusedItem(-1);
+          toggleDropdown(false);
         }
+      } else if (!hasTyped) {
+        setHasTyped(true);
       }
-    } else if (e.key === 'Tab' && e.shiftKey) {
-      if (focusedIndex > 0 || (!alwaysSelectOption && focusedIndex === 0)) {
-        updateFocusedItem(focusedIndex - 1);
-        e.preventDefault();
-      } else {
-        updateFocusedItem(-1);
-        toggleDropdown(false);
-      }
-    } else if (!hasTyped) {
-      setHasTyped(true);
     }
-  });
+  }, [updateFocusedItem, alwaysSelectOption, isActive, focusedIndex, hasTyped, toggleDropdown, items.length]);
 
   return (
     <div ref={containerRef} className={isActive ? activeClassName : className}>