From 61abcdb61275c3552d27eff8e0fa9a6280e9f84e Mon Sep 17 00:00:00 2001 From: nmanu1 <88398086+nmanu1@users.noreply.github.com> Date: Thu, 22 Sep 2022 08:49:24 -0400 Subject: [PATCH] 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 | 5 ++--- .github/workflows/run-tests.yml | 2 +- .github/workflows/sync_develop_and_main.yml | 11 +++++++++++ .github/workflows/version_update.yml | 11 +++++++++++ .github/workflows/wcag_test.yml | 3 +-- package-lock.json | 1 - package.json | 1 - src/components/Dropdown/Dropdown.tsx | 17 ++++++++--------- test-site/package-lock.json | 10 ++++------ 9 files changed, 38 insertions(+), 23 deletions(-) create mode 100644 .github/workflows/sync_develop_and_main.yml create mode 100644 .github/workflows/version_update.yml diff --git a/.github/workflows/run-linting.yml b/.github/workflows/run-linting.yml index dd2274a4c..30401cb39 100644 --- a/.github/workflows/run-linting.yml +++ b/.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 \ No newline at end of file + uses: yext/slapshot-reusable-workflows/.github/workflows/run-linting.yml@v1 diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml index 4a5b94e38..19e202d19 100644 --- a/.github/workflows/run-tests.yml +++ b/.github/workflows/run-tests.yml @@ -17,4 +17,4 @@ jobs: build_script: | npm i -D react@16.14 react-dom@16.14 npm run build - node_matrix: '["14.x", "16.x", "18.x"]' \ No newline at end of file + node_matrix: '["14.x", "16.x", "18.x"]' diff --git a/.github/workflows/sync_develop_and_main.yml b/.github/workflows/sync_develop_and_main.yml new file mode 100644 index 000000000..e1c82630f --- /dev/null +++ b/.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 }} diff --git a/.github/workflows/version_update.yml b/.github/workflows/version_update.yml new file mode 100644 index 000000000..a246e47fa --- /dev/null +++ b/.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 }} diff --git a/.github/workflows/wcag_test.yml b/.github/workflows/wcag_test.yml index 1201c2a65..90d26ade8 100644 --- a/.github/workflows/wcag_test.yml +++ b/.github/workflows/wcag_test.yml @@ -2,8 +2,7 @@ name: WCAG tests on: pull_request: - branches: - - main + branches: [main, develop] jobs: call_wcag_test: diff --git a/package-lock.json b/package-lock.json index 5c4b8220f..1f1da5fa2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,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", diff --git a/package.json b/package.json index c27664182..0bc673600 100644 --- a/package.json +++ b/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", diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx index b9b375079..5bc637837 100644 --- a/src/components/Dropdown/Dropdown.tsx +++ b/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): JSX.Element { toggleDropdown(false); }, { disabled: !isActive }); - useGlobalListener('keydown', e => { - if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { - e.preventDefault(); - } - + function handleKeyDown(e: KeyboardEvent) { 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): JSX.Element { } else if (!hasTyped) { setHasTyped(true); } - }); + } return ( -
+
diff --git a/test-site/package-lock.json b/test-site/package-lock.json index 6abf5797b..4947376bb 100644 --- a/test-site/package-lock.json +++ b/test-site/package-lock.json @@ -28,12 +28,11 @@ }, "..": { "name": "@yext/search-ui-react", - "version": "1.0.0-alpha.301", + "version": "1.0.0", "license": "BSD-3-Clause", "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", @@ -73,7 +72,7 @@ "@typescript-eslint/eslint-plugin": "^5.16.0", "@typescript-eslint/parser": "^5.16.0", "@yext/eslint-config-slapshot": "^0.5.0", - "@yext/search-headless-react": "2.0.0-alpha.158", + "@yext/search-headless-react": "^2.0.0", "axe-playwright": "^1.1.11", "babel-jest": "^27.0.6", "babel-loader": "^8.2.3", @@ -91,7 +90,7 @@ "typescript": "~4.4.3" }, "peerDependencies": { - "@yext/search-headless-react": "2.0.0-alpha.158", + "@yext/search-headless-react": "^2.0.0", "react": "^16.14 || ^17 || ^18" } }, @@ -35301,7 +35300,6 @@ "@microsoft/api-extractor": "^7.19.4", "@percy/cli": "^1.8.0", "@percy/storybook": "^4.3.3", - "@restart/hooks": "^0.4.5", "@restart/ui": "^1.0.1", "@storybook/addon-a11y": "^6.5.10", "@storybook/addon-actions": "^6.5.10", @@ -35326,7 +35324,7 @@ "@typescript-eslint/parser": "^5.16.0", "@yext/analytics": "^0.2.0-beta.3", "@yext/eslint-config-slapshot": "^0.5.0", - "@yext/search-headless-react": "2.0.0-alpha.158", + "@yext/search-headless-react": "^2.0.0", "axe-playwright": "^1.1.11", "babel-jest": "^27.0.6", "babel-loader": "^8.2.3",