Fix a bug in the useMnemonics hook to make it compatible with textareas

.changeset/mean-bees-ring.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+useMnemonics hook ignores keydown events from textarea elements

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')

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