Only e.preventDefault when Dropdown is active (#307)

Update the `Dropdown` component to only call `e.preventDefault` for the up/down arrow keys if the dropdown is active.

J=SLAP-2351
TEST=manual

Spin up the test-site, load results, and see that the up and down arrow keys scroll the page when the dropdown is closed. When the dropdown is active, up/down arrows work as expected to navigate through dropdown options. Tested both the `SearchBar` and `FilterSearch` dropdowns.

.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 { createElement, isValidElement, KeyboardEvent, 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,15 +100,15 @@ export function Dropdown(props: PropsWithChildren<DropdownProps>): JSX.Element {
     toggleDropdown(false);
   }, { disabled: !isActive });
 
-  useGlobalListener('keydown', e => {
-    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-      e.preventDefault();
-    }
-
+  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
     if (!isActive) {
       return;
     }
 
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+    }
+
     if (e.key === 'ArrowDown') {
       if (alwaysSelectOption && focusedIndex === items.length - 1) {
         updateFocusedItem(0);
@@ -143,10 +142,10 @@ export function Dropdown(props: PropsWithChildren<DropdownProps>): JSX.Element {
     } else if (!hasTyped) {
       setHasTyped(true);
     }
-  });
+  }
 
   return (
-    <div ref={containerRef} className={isActive ? activeClassName : className}>
+    <div ref={containerRef} className={isActive ? activeClassName : className} onKeyDown={handleKeyDown}>
       <DropdownContext.Provider value={dropdownContext}>
         <InputContext.Provider value={inputContext}>
           <FocusContext.Provider value={focusContext}>