feat: Add input onChange handler to ComboBox

src/components/forms/ComboBox/ComboBox.stories.tsx

@@ -146,3 +146,39 @@ export const externalClearSelection = (): React.ReactElement => {
     </Form>
   )
 }
+
+export const customInputChangeHandler = (): React.ReactElement => {
+  const fruitList = Object.entries(fruits).map(([value, key]) => ({
+    value: value,
+    label: key,
+  }))
+
+  const options = [...fruitList]
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = e.target
+
+    if (value && fruitList.findIndex((f) => f.value === value) < 0) {
+      if (options.length === fruitList.length) {
+        // Add new option to end of list
+        options.push({ value, label: value })
+      } else {
+        // Rewrite the new option
+        options[options.length - 1] = { value, label: `Add new: ${value}` }
+      }
+    }
+  }
+
+  return (
+    <Form onSubmit={noop}>
+      <Label htmlFor="fruit">Select a Fruit</Label>
+      <ComboBox
+        id="fruit"
+        name="fruit"
+        options={options}
+        onChange={noop}
+        inputProps={{ onChange: handleInputChange }}
+      />
+    </Form>
+  )
+}

src/components/forms/ComboBox/ComboBox.test.tsx

@@ -248,7 +248,25 @@ describe('ComboBox component', () => {
     expect(comboBoxInput).toHaveAttribute('role', 'testing')
   })
 
-  it('renders input with custom props if passed in', () => {
+  it('allows a custom input onChange handler to be called', () => {
+    const mockOnInputChange = jest.fn()
+
+    const { getByTestId } = render(
+      <ComboBox
+        id="favorite-fruit"
+        name="favorite-fruit"
+        options={fruitOptions}
+        onChange={jest.fn()}
+        inputProps={{ onChange: mockOnInputChange }}
+      />
+    )
+
+    const input = getByTestId('combo-box-input')
+    userEvent.type(input, 'x')
+    expect(mockOnInputChange).toHaveBeenCalled()
+  })
+
+  it('renders list with custom props if passed in', () => {
     const { getByTestId } = render(
       <ComboBox
         id="favorite-fruit"

src/components/forms/ComboBox/ComboBox.tsx

@@ -75,9 +75,9 @@ const Input = ({
   return (
     <input
       type="text"
+      {...inputProps}
       className="usa-combo-box__input"
       data-testid="combo-box-input"
-      {...inputProps}
       autoCapitalize="off"
       autoComplete="off"
       ref={inputRef}
@@ -349,35 +349,40 @@ export const ComboBox = forwardRef(
         id={id}
         ref={containerRef}>
         <select
+          {...selectProps}
           className="usa-select usa-sr-only usa-combo-box__select"
           name={name}
           aria-hidden
           tabIndex={-1}
           defaultValue={state.selectedOption?.value}
           data-testid="combo-box-select"
-          disabled={isDisabled}
-          {...selectProps}>
+          disabled={isDisabled}>
           {options.map((option) => (
             <option key={option.value} value={option.value}>
               {option.label}
             </option>
           ))}
         </select>
         <Input
-          onChange={(e): void =>
+          role="combobox"
+          {...inputProps}
+          onChange={(e): void => {
+            if (inputProps?.onChange) {
+              // Allow a custom input onChange handler
+              inputProps?.onChange(e)
+            }
+
             dispatch({ type: ActionTypes.UPDATE_FILTER, value: e.target.value })
-          }
+          }}
           onClick={(): void => dispatch({ type: ActionTypes.OPEN_LIST })}
           onBlur={handleInputBlur}
           onKeyDown={handleInputKeyDown}
           value={state.inputValue}
           focused={state.focusMode === FocusMode.Input}
-          role="combobox"
           aria-owns={listID}
           aria-describedby={assistiveHintID}
           aria-expanded={state.isOpen}
           disabled={isDisabled}
-          {...inputProps}
         />
         <span className="usa-combo-box__clear-input__wrapper" tabIndex={-1}>
           <button
@@ -411,13 +416,13 @@ export const ComboBox = forwardRef(
           </button>
         </span>
         <ul
+          {...ulProps}
           data-testid="combo-box-option-list"
           tabIndex={-1}
           id={listID}
           className="usa-combo-box__list"
           role="listbox"
-          hidden={!state.isOpen}
-          {...ulProps}>
+          hidden={!state.isOpen}>
           {state.filteredOptions.map((option, index) => {
             const focused = option === state.focusedOption
             const selected = option === state.selectedOption

src/index.ts

@@ -31,7 +31,7 @@ export { Grid } from './components/grid/Grid/Grid'
 /** Form components */
 export { CharacterCount } from './components/forms/CharacterCount/CharacterCount'
 export { Checkbox } from './components/forms/Checkbox/Checkbox'
-export { ComboBox } from './components/forms/ComboBox/ComboBox'
+export { ComboBox, ComboBoxOption } from './components/forms/ComboBox/ComboBox'
 export { DateInput } from './components/forms/DateInput/DateInput'
 export { DateInputGroup } from './components/forms/DateInputGroup/DateInputGroup'
 export { DatePicker } from './components/forms/DatePicker/DatePicker'