From 7312f87130eec52e39ab5185934cb5eb0fdfad64 Mon Sep 17 00:00:00 2001
From: William Glas <willglas@github.com>
Date: Wed, 7 Sep 2022 13:32:49 -0400
Subject: [PATCH 1/2] Fix a bug in the useMnemonics hook to make it compatible
 with textareas

---
 .changeset/mean-bees-ring.md              |  5 +++++
 src/__tests__/hooks/useMnemonics.test.tsx | 14 ++++++++++++++
 src/hooks/useMnemonics.ts                 |  2 +-
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/mean-bees-ring.md

diff --git a/.changeset/mean-bees-ring.md b/.changeset/mean-bees-ring.md
new file mode 100644
index 00000000000..965a8d3d3d1
--- /dev/null
+++ b/.changeset/mean-bees-ring.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+useMnemonics hook ignores keydown events from textarea elements
diff --git a/src/__tests__/hooks/useMnemonics.test.tsx b/src/__tests__/hooks/useMnemonics.test.tsx
index 5bbb9e58b38..beb26f2858d 100644
--- a/src/__tests__/hooks/useMnemonics.test.tsx
+++ b/src/__tests__/hooks/useMnemonics.test.tsx
@@ -5,10 +5,12 @@ import {useMnemonics} from '../../hooks'
 const Fixture = ({
   onSelect = () => null,
   hasInput = false,
+  hasTextarea = false,
   refNotAttached = false
 }: {
   onSelect?: (event: React.KeyboardEvent<HTMLButtonElement>) => void
   hasInput?: boolean
+  hasTextarea?: boolean
   refNotAttached?: boolean
 }) => {
   const containerRef = React.createRef<HTMLDivElement>()
@@ -19,6 +21,7 @@ const Fixture = ({
       <div ref={refNotAttached ? undefined : containerRef} data-testid="container">
         {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
         {hasInput && <input autoFocus type="text" placeholder="Filter options" />}
+        {hasTextarea && <textarea autoFocus placeholder="Filter options" />}
         <button onKeyDown={onSelect}>button 1</button>
         <button onKeyDown={onSelect}>Button 2</button>
         <button onKeyDown={onSelect}>third button</button>
@@ -154,6 +157,17 @@ describe('useTypeaheadFocus', () => {
     expect(input).toEqual(document.activeElement)
   })
 
+  it('Text area: when a textarea has focus, typeahead should not do anything', async () => {
+    const {getByTestId, getByPlaceholderText} = render(<Fixture hasTextarea={true} />)
+    const container = getByTestId('container')
+
+    const textArea = getByPlaceholderText('Filter options')
+    expect(textArea).toEqual(document.activeElement)
+
+    fireEvent.keyDown(container, {key: 'b', code: 'b'})
+    expect(textArea).toEqual(document.activeElement)
+  })
+
   it('Missing ref: when a ref is not attached, typeahead should break the component', async () => {
     const {getByTestId, getByText} = render(<Fixture refNotAttached={true} />)
     const container = getByTestId('container')
diff --git a/src/hooks/useMnemonics.ts b/src/hooks/useMnemonics.ts
index 214c2d2cd4a..6e022a4320c 100644
--- a/src/hooks/useMnemonics.ts
+++ b/src/hooks/useMnemonics.ts
@@ -37,7 +37,7 @@ export const useMnemonics = (open: boolean, providedRef?: React.RefObject<HTMLEl
       const handler = (event: KeyboardEvent) => {
         // skip if a TextInput has focus
         const activeElement = document.activeElement as HTMLElement
-        if (activeElement.tagName === 'INPUT') return
+        if (activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA') return
 
         // skip if used with modifier to preserve shortcuts like ⌘ + F
         const hasModifier = event.ctrlKey || event.altKey || event.metaKey

From e2dd989490deb9298b31cdd361c5be5eb935cc33 Mon Sep 17 00:00:00 2001
From: Will Glas <willglas@github.com>
Date: Mon, 31 Oct 2022 12:02:32 -0400
Subject: [PATCH 2/2] Disable a11y autofocus rule in test

---
 src/__tests__/hooks/useMnemonics.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/__tests__/hooks/useMnemonics.test.tsx b/src/__tests__/hooks/useMnemonics.test.tsx
index beb26f2858d..90ebb09c2d8 100644
--- a/src/__tests__/hooks/useMnemonics.test.tsx
+++ b/src/__tests__/hooks/useMnemonics.test.tsx
@@ -21,6 +21,7 @@ const Fixture = ({
       <div ref={refNotAttached ? undefined : containerRef} data-testid="container">
         {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
         {hasInput && <input autoFocus type="text" placeholder="Filter options" />}
+        {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
         {hasTextarea && <textarea autoFocus placeholder="Filter options" />}
         <button onKeyDown={onSelect}>button 1</button>
         <button onKeyDown={onSelect}>Button 2</button>