Add openOnFocus prop to AutocompleteInput (#4555)

* Add `openOnFocus` prop to `AutocompleteInput`
Towards github/accessibility-audits#7437

* Add changeset

* Fix JSON formatting

* Allow up and down to open menu if not already open

* update hook

* Update packages/react/src/Autocomplete/AutocompleteInput.tsx

Co-authored-by: Kendall Gassner <[email protected]>

---------

Co-authored-by: Kendall Gassner <[email protected]>

Author: JoyceZhu

.changeset/few-weeks-serve.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add `openInFocus` prop (default: true) to `AutocompleteInput`

packages/react/src/Autocomplete/Autocomplete.docs.json

@@ -19,6 +19,12 @@
           "name": "as",
           "type": "React.ElementType",
           "defaultValue": "TextInput"
+        },
+        {
+          "name": "openOnFocus",
+          "type": "boolean",
+          "defaultValue": "true",
+          "description": "Whether the associated autocomplete menu should open on an input focus event"
         }
       ],
       "passthrough": {

packages/react/src/Autocomplete/Autocomplete.stories.tsx

@@ -29,6 +29,9 @@ const getArgsByChildComponent = ({
   menuLoading,
   selectionVariant,
 
+  // Autocomplete.Input
+  openOnFocus,
+
   // Autocomplete.Overlay
   anchorSide,
   height,
@@ -65,6 +68,7 @@ any) => {
   }
   return {
     menuArgs: {emptyStateText, loading: menuLoading, selectionVariant},
+    inputArgs: {openOnFocus},
     overlayArgs: {anchorSide, height, maxHeight: overlayMaxHeight, width},
     textInputArgs,
     textInputWithTokensArgs: {
@@ -131,6 +135,7 @@ const autocompleteStoryMeta: Meta = {
     emptyStateText: 'No selectable options',
     menuLoading: false,
     selectionVariant: 'single',
+    openOnFocus: true,
     anchorSide: undefined,
     height: 'auto',
     overlayMaxHeight: undefined,
@@ -161,6 +166,16 @@ const autocompleteStoryMeta: Meta = {
       },
     },
 
+    // Autocomplete.Input
+    openOnFocus: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'Autocomplete.Input',
+      },
+    },
+
     // Autocomplete.Overlay
     anchorSide: {
       control: {
@@ -217,7 +232,7 @@ const autocompleteStoryMeta: Meta = {
 
 export const Default = (args: FormControlArgs<AutocompleteArgs>) => {
   const {parentArgs, labelArgs, captionArgs, validationArgs} = getFormControlArgsByChildComponent(args)
-  const {menuArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args)
+  const {menuArgs, inputArgs, overlayArgs, textInputArgs} = getArgsByChildComponent(args)
   const isMultiselect = menuArgs.selectionVariant === 'multiple'
   const [selectedItemIds, setSelectedItemIds] = useState<Array<string>>([])
   const onSelectedChange = (newlySelectedItems: Datum | Datum[]) => {
@@ -228,12 +243,19 @@ export const Default = (args: FormControlArgs<AutocompleteArgs>) => {
     setSelectedItemIds(newlySelectedItems.map(item => item.id))
   }
 
+  const autocompleteInput = {...inputArgs, ...textInputArgs}
+  const formValidationId = 'validation-field'
   return (
     <Box as="form" sx={{p: 3}} onSubmit={event => event.preventDefault()}>
       <FormControl {...parentArgs}>
         <FormControl.Label id="autocompleteLabel" {...labelArgs} />
         <Autocomplete>
-          <Autocomplete.Input {...textInputArgs} size={textInputArgs.inputSize} data-testid="autocompleteInput" />
+          <Autocomplete.Input
+            aria-describedby={formValidationId}
+            {...autocompleteInput}
+            size={textInputArgs.inputSize}
+            data-testid="autocompleteInput"
+          />
           <Autocomplete.Overlay {...overlayArgs}>
             <Autocomplete.Menu
               items={items}
@@ -246,7 +268,7 @@ export const Default = (args: FormControlArgs<AutocompleteArgs>) => {
         </Autocomplete>
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
         {validationArgs.children && validationArgs.variant && (
-          <FormControl.Validation {...validationArgs} variant={validationArgs.variant} />
+          <FormControl.Validation id={formValidationId} {...validationArgs} variant={validationArgs.variant} />
         )}
       </FormControl>
     </Box>

packages/react/src/Autocomplete/AutocompleteInput.tsx

@@ -10,11 +10,27 @@ import useSafeTimeout from '../hooks/useSafeTimeout'
 type InternalAutocompleteInputProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.ComponentType<React.PropsWithChildren<any>>
+  // When false, the autocomplete menu will not render either on mouse click or
+  // keyboard focus.
+  openOnFocus?: boolean
 }
 
+const ARROW_KEYS_NAV = new Set(['ArrowUp', 'ArrowDown'])
+
 const AutocompleteInput = React.forwardRef(
   (
-    {as: Component = TextInput, onFocus, onBlur, onChange, onKeyDown, onKeyUp, onKeyPress, value, ...props},
+    {
+      as: Component = TextInput,
+      onFocus,
+      onBlur,
+      onChange,
+      onKeyDown,
+      onKeyUp,
+      onKeyPress,
+      value,
+      openOnFocus = true,
+      ...props
+    },
     forwardedRef,
   ) => {
     const autocompleteContext = useContext(AutocompleteContext)
@@ -38,10 +54,12 @@ const AutocompleteInput = React.forwardRef(
 
     const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(
       event => {
-        onFocus && onFocus(event)
-        setShowMenu(true)
+        if (openOnFocus) {
+          onFocus?.(event)
+          setShowMenu(true)
+        }
       },
-      [onFocus, setShowMenu],
+      [onFocus, setShowMenu, openOnFocus],
     )
 
     const handleInputBlur: FocusEventHandler<HTMLInputElement> = useCallback(
@@ -83,8 +101,11 @@ const AutocompleteInput = React.forwardRef(
           setInputValue('')
           inputRef.current.value = ''
         }
+        if (!showMenu && ARROW_KEYS_NAV.has(event.key) && !event.altKey) {
+          setShowMenu(true)
+        }
       },
-      [inputRef, setInputValue, setHighlightRemainingText, onKeyDown],
+      [inputRef, setInputValue, setHighlightRemainingText, onKeyDown, showMenu, setShowMenu],
     )
 
     const handleInputKeyUp: KeyboardEventHandler<HTMLInputElement> = useCallback(