From 502cf55f6662ddc54c2504df9f5b8a9466ed6444 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 13 Apr 2021 15:38:29 -0400
Subject: [PATCH 01/24] Add disableFiltering prop

---
 src/components/forms/ComboBox/ComboBox.tsx    | 10 +++++-----
 src/components/forms/ComboBox/useCombobox.ts  | 20 +++++++++++--------
 .../forms/TimePicker/TimePicker.tsx           |  6 +-----
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 14ebf5e193..d97cb1114c 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -1,7 +1,7 @@
 import React, { KeyboardEvent, FocusEvent, useEffect, useRef } from 'react'
 import classnames from 'classnames'
 
-import { ActionTypes, Action, State, useCombobox } from './useCombobox'
+import { ActionTypes, Action, State, useComboBox } from './useComboBox'
 
 /*  As per USWDS spec, ComboBox includes a HTML <select> with options AND a separate <input> and dropdown <ul> with items.
     The select is usa-sr-only and is always hidden via CSS. The input and dropdown list are the elements used for interaction.
@@ -37,6 +37,7 @@ interface ComboBoxProps {
   noResults?: string
   inputProps?: JSX.IntrinsicElements['input']
   selectProps?: JSX.IntrinsicElements['select']
+  disableFiltering?: boolean
 }
 
 interface InputProps {
@@ -79,7 +80,7 @@ export const ComboBox = ({
   noResults,
   selectProps,
   inputProps,
-  ...customProps
+  disableFiltering = false,
 }: ComboBoxProps): React.ReactElement => {
   const isDisabled = !!disabled
 
@@ -100,7 +101,7 @@ export const ComboBox = ({
     inputValue: defaultOption ? defaultOption.label : '',
   }
 
-  const [state, dispatch] = useCombobox(initialState, options)
+  const [state, dispatch] = useComboBox(initialState, options, disableFiltering)
 
   const containerRef = useRef<HTMLDivElement>(null)
   const itemRef = useRef<HTMLLIElement>(null)
@@ -271,8 +272,7 @@ export const ComboBox = ({
       data-testid="combo-box"
       className={containerClasses}
       id={id}
-      ref={containerRef}
-      {...customProps}>
+      ref={containerRef}>
       <select
         className="usa-select usa-sr-only usa-combo-box__select"
         name={name}
diff --git a/src/components/forms/ComboBox/useCombobox.ts b/src/components/forms/ComboBox/useCombobox.ts
index c436e0ed19..4e2426c21d 100644
--- a/src/components/forms/ComboBox/useCombobox.ts
+++ b/src/components/forms/ComboBox/useCombobox.ts
@@ -47,9 +47,10 @@ export interface State {
   inputValue: string
 }
 
-export const useCombobox = (
+export const useComboBox = (
   initialState: State,
-  optionsList: ComboBoxOption[]
+  optionsList: ComboBoxOption[],
+  disableFiltering = false
 ): [State, React.Dispatch<Action>] => {
   const isPartialMatch = (
     needle: string
@@ -58,7 +59,10 @@ export const useCombobox = (
       option.label.toLowerCase().includes(needle.toLowerCase())
   }
 
-  function reducer(state: State, action: Action): State {
+  const filterOptions = (needle: string): ComboBoxOption[] =>
+    disableFiltering ? optionsList : optionsList.filter(isPartialMatch(needle))
+
+  const reducer = (state: State, action: Action): State => {
     switch (action.type) {
       case ActionTypes.SELECT_OPTION:
         return {
@@ -68,14 +72,14 @@ export const useCombobox = (
           focusMode: FocusMode.Input,
           inputValue: action.option.label,
           filter: undefined,
-          filteredOptions: optionsList.filter(isPartialMatch('')),
+          filteredOptions: filterOptions(''),
         }
       case ActionTypes.UPDATE_FILTER: {
         const newState = {
           ...state,
           isOpen: true,
           filter: action.value,
-          filteredOptions: optionsList.filter(isPartialMatch(action.value)),
+          filteredOptions: filterOptions(action.value),
           inputValue: action.value,
         }
 
@@ -104,7 +108,7 @@ export const useCombobox = (
         }
 
         if (state.filteredOptions.length === 0) {
-          newState.filteredOptions = optionsList.filter(isPartialMatch(''))
+          newState.filteredOptions = filterOptions('')
           newState.inputValue = ''
         }
 
@@ -130,7 +134,7 @@ export const useCombobox = (
           focusMode: FocusMode.Input,
           selectedOption: undefined,
           filter: undefined,
-          filteredOptions: optionsList.filter(isPartialMatch('')),
+          filteredOptions: filterOptions(''),
         }
       case ActionTypes.BLUR: {
         const newState = {
@@ -141,7 +145,7 @@ export const useCombobox = (
         }
 
         if (state.filteredOptions.length === 0) {
-          newState.filteredOptions = optionsList.filter(isPartialMatch(''))
+          newState.filteredOptions = filterOptions('')
         }
 
         if (!state.selectedOption) {
diff --git a/src/components/forms/TimePicker/TimePicker.tsx b/src/components/forms/TimePicker/TimePicker.tsx
index a0538a8118..13e5030d8a 100644
--- a/src/components/forms/TimePicker/TimePicker.tsx
+++ b/src/components/forms/TimePicker/TimePicker.tsx
@@ -75,11 +75,7 @@ export const TimePicker = ({
         defaultValue={defaultValue}
         options={timeOptions}
         disabled={disabled}
-        data-filter={FILTER_DATASET.filter}
-        data-ap-query-filter={FILTER_DATASET.apQueryFilter}
-        data-hour-query-filter={FILTER_DATASET.hourQueryFilter}
-        data-minute-query-filter={FILTER_DATASET.minuteQueryFilter}
-        data-disable-filtering="true"
+        disableFiltering
       />
     </FormGroup>
   )

From ac45cb310f82b56dbbae53f49538a9c8ed47df0f Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 13 Apr 2021 18:11:58 -0400
Subject: [PATCH 02/24] Focus the selected opion on arrow down

---
 src/components/forms/ComboBox/ComboBox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index d97cb1114c..a8eb8f0622 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -139,7 +139,7 @@ export const ComboBox = ({
       event.preventDefault()
       dispatch({
         type: ActionTypes.FOCUS_OPTION,
-        option: state.filteredOptions[0],
+        option: state.selectedOption || state.filteredOptions[0],
       })
     } else if (event.key === 'Tab') {
       // Clear button is not visible in this case so manually handle focus

From 73b116c090bbb5d76e144e2e44980a776ad2014f Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 13 Apr 2021 18:47:16 -0400
Subject: [PATCH 03/24] Scroll selected option into view on list open

---
 src/components/forms/ComboBox/ComboBox.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index a8eb8f0622..8de0d37042 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -120,6 +120,12 @@ export const ComboBox = ({
     }
   }, [state.focusMode, state.focusedOption])
 
+  useEffect(() => {
+    if (state.isOpen && state.selectedOption && itemRef.current) {
+      itemRef.current.scrollIntoView()
+    }
+  }, [state.isOpen])
+
   // If the focused element (activeElement) is outside of the combo box,
   // make sure the focusMode is BLUR
   useEffect(() => {

From f3adf24b88972d9006f8c74e3c22c9f4cae73eb9 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 13 Apr 2021 19:39:11 -0400
Subject: [PATCH 04/24] Just set the options list to all options instead of
 filtering on ''

---
 .../forms/ComboBox/{useCombobox.ts => useComboBox.ts}     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)
 rename src/components/forms/ComboBox/{useCombobox.ts => useComboBox.ts} (94%)

diff --git a/src/components/forms/ComboBox/useCombobox.ts b/src/components/forms/ComboBox/useComboBox.ts
similarity index 94%
rename from src/components/forms/ComboBox/useCombobox.ts
rename to src/components/forms/ComboBox/useComboBox.ts
index 4e2426c21d..853149be8b 100644
--- a/src/components/forms/ComboBox/useCombobox.ts
+++ b/src/components/forms/ComboBox/useComboBox.ts
@@ -72,7 +72,7 @@ export const useComboBox = (
           focusMode: FocusMode.Input,
           inputValue: action.option.label,
           filter: undefined,
-          filteredOptions: filterOptions(''),
+          filteredOptions: optionsList,
         }
       case ActionTypes.UPDATE_FILTER: {
         const newState = {
@@ -108,7 +108,7 @@ export const useComboBox = (
         }
 
         if (state.filteredOptions.length === 0) {
-          newState.filteredOptions = filterOptions('')
+          newState.filteredOptions = optionsList
           newState.inputValue = ''
         }
 
@@ -134,7 +134,7 @@ export const useComboBox = (
           focusMode: FocusMode.Input,
           selectedOption: undefined,
           filter: undefined,
-          filteredOptions: filterOptions(''),
+          filteredOptions: optionsList,
         }
       case ActionTypes.BLUR: {
         const newState = {
@@ -145,7 +145,7 @@ export const useComboBox = (
         }
 
         if (state.filteredOptions.length === 0) {
-          newState.filteredOptions = filterOptions('')
+          newState.filteredOptions = optionsList
         }
 
         if (!state.selectedOption) {

From c98aaa1065a9ec454b5de7623ed8c2c159639efe Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 13 Apr 2021 20:56:50 -0400
Subject: [PATCH 05/24] Test Updates:

- Verify first element has focused class
- Mock scrollIntoView to keep tests from failing
---
 .../forms/ComboBox/ComboBox.test.tsx          | 21 +++++++++++
 src/components/forms/ComboBox/ComboBox.tsx    |  4 ++-
 src/components/forms/ComboBox/utils.ts        | 36 +++++++++++++++++++
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 src/components/forms/ComboBox/utils.ts

diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index 97fdb0096e..1d46e268c4 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -18,6 +18,8 @@ const fruitOptions = Object.entries(fruits).map(([value, key]) => ({
 }))
 
 describe('ComboBox component', () => {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn()
+
   it('renders without errors', () => {
     const { getByTestId } = render(
       <ComboBox
@@ -1261,4 +1263,23 @@ describe('ComboBox component', () => {
       expect(firstItem).toHaveTextContent('NOTHING')
     })
   })
+
+  it('applies the focus class to the first item in the list when opened and no item is selected', () => {
+    const { getByTestId } = render(
+      <ComboBox
+        id="favorite-fruit"
+        name="favorite-fruit"
+        options={fruitOptions}
+        onChange={jest.fn()}
+      />
+    )
+
+    const firstItem = getByTestId('combo-box-option-list').children[0]
+
+    userEvent.click(getByTestId('combo-box-toggle'))
+
+    expect(firstItem).toBeVisible()
+    expect(firstItem).not.toHaveFocus()
+    expect(firstItem).toHaveClass('usa-combo-box__list-option--focused')
+  })
 })
diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 8de0d37042..3f5758c7af 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -349,7 +349,9 @@ export const ComboBox = ({
         role="listbox"
         hidden={!state.isOpen}>
         {state.filteredOptions.map((option, index) => {
-          const focused = option === state.focusedOption
+          const focused =
+            option === state.focusedOption ||
+            (!state.focusedOption && option === options[0])
           const selected = option === state.selectedOption
           const itemClasses = classnames('usa-combo-box__list-option', {
             'usa-combo-box__list-option--focused': focused,
diff --git a/src/components/forms/ComboBox/utils.ts b/src/components/forms/ComboBox/utils.ts
new file mode 100644
index 0000000000..5b8111525d
--- /dev/null
+++ b/src/components/forms/ComboBox/utils.ts
@@ -0,0 +1,36 @@
+/**
+ * Generate a dynamic regular expression based off of a replaceable and possibly filtered value.
+ *
+ * @param {string} el An element within the combo box component
+ * @param {string} query The value to use in the regular expression
+ * @param {object} extras An object of regular expressions to replace and filter the query
+ */
+const generateDynamicRegExp = (
+  filter: string,
+  query = '',
+  extras: Record<string, string>
+): RegExp => {
+  const escapeRegExp = (text: string): string => {
+    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')
+  }
+
+  let find = filter.replace(/{{(.*?)}}/g, (_m, $1: string): string => {
+    const key = $1.trim()
+    const queryFilter = extras[key]
+    if (key !== 'query' && queryFilter) {
+      const matcher = new RegExp(queryFilter, 'i')
+      const matches = query.match(matcher)
+
+      if (matches) {
+        return escapeRegExp(matches[1])
+      }
+
+      return ''
+    }
+    return escapeRegExp(query)
+  })
+
+  find = '^(?:' + find + ')$'
+
+  return new RegExp(find, 'i')
+}

From a76d7a0a8799e3f04c6a6e16618a91f1bec6bffe Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Tue, 13 Apr 2021 21:49:17 -0400
Subject: [PATCH 06/24] When scrolling into view, scroll so item is at bottom

---
 src/components/forms/ComboBox/ComboBox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 3f5758c7af..b51695015b 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -122,7 +122,7 @@ export const ComboBox = ({
 
   useEffect(() => {
     if (state.isOpen && state.selectedOption && itemRef.current) {
-      itemRef.current.scrollIntoView()
+      itemRef.current.scrollIntoView(false)
     }
   }, [state.isOpen])
 

From af9bd74efe5bd8147f3cf14213d961312d9af6d6 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 11:43:42 -0400
Subject: [PATCH 07/24] Match casing to USWDS

---
 src/components/forms/ComboBox/ComboBox.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/forms/ComboBox/ComboBox.stories.tsx b/src/components/forms/ComboBox/ComboBox.stories.tsx
index 3318003b4c..6e4ee1df1d 100644
--- a/src/components/forms/ComboBox/ComboBox.stories.tsx
+++ b/src/components/forms/ComboBox/ComboBox.stories.tsx
@@ -71,7 +71,7 @@ export const withLabel = (): React.ReactElement => {
 
   return (
     <Form onSubmit={noop}>
-      <Label htmlFor="fruit">Select A Fruit</Label>
+      <Label htmlFor="fruit">Select a fruit</Label>
       <ComboBox id="fruit" name="fruit" options={fruitList} onChange={noop} />
     </Form>
   )

From 256fa245e1ee35c98626d3ada8ff423d3c6ffa5c Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 11:48:09 -0400
Subject: [PATCH 08/24] Implement custom filtering:

- Use regex pattern and CustomizableFilter structure
- Unfilter items on Blur: Either an item is selected, and all options should be shown when the list is expanded again, or no option is selected, the field is cleared, and all items should be shown.
- Remove almost unused 'filter' prop from state
- Update TimePicker to use the custom filtering logic
---
 src/components/forms/ComboBox/ComboBox.tsx    | 22 +++++++++++--
 src/components/forms/ComboBox/useComboBox.ts  | 32 ++++++++-----------
 src/components/forms/ComboBox/utils.ts        |  7 ++--
 .../forms/TimePicker/TimePicker.tsx           |  3 +-
 src/components/forms/TimePicker/constants.ts  | 12 ++++---
 5 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index b51695015b..a9b436c93f 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -9,6 +9,9 @@ import { ActionTypes, Action, State, useComboBox } from './useComboBox'
     There is the ability to pass in custom props directly to the select and input.
     This should be using sparingly and not with existing Combobox props such as disabled, onChange, defaultValue. 
 */
+
+const DEFAULT_FILTER = '.*{{query}}.*'
+
 export interface ComboBoxOption {
   value: string
   label: string
@@ -25,6 +28,11 @@ export enum FocusMode {
   Item,
 }
 
+export interface CustomizableFilter {
+  filter: string
+  extras?: Record<string, string>
+}
+
 interface ComboBoxProps {
   id: string
   name: string
@@ -37,6 +45,7 @@ interface ComboBoxProps {
   noResults?: string
   inputProps?: JSX.IntrinsicElements['input']
   selectProps?: JSX.IntrinsicElements['select']
+  customFilter?: CustomizableFilter
   disableFiltering?: boolean
 }
 
@@ -80,6 +89,7 @@ export const ComboBox = ({
   noResults,
   selectProps,
   inputProps,
+  customFilter,
   disableFiltering = false,
 }: ComboBoxProps): React.ReactElement => {
   const isDisabled = !!disabled
@@ -91,17 +101,25 @@ export const ComboBox = ({
     })
   }
 
+  const filter: CustomizableFilter = customFilter
+    ? customFilter
+    : { filter: DEFAULT_FILTER }
+
   const initialState: State = {
     isOpen: false,
     selectedOption: defaultOption ? defaultOption : undefined,
     focusedOption: undefined,
     focusMode: FocusMode.None,
     filteredOptions: options,
-    filter: undefined,
     inputValue: defaultOption ? defaultOption.label : '',
   }
 
-  const [state, dispatch] = useComboBox(initialState, options, disableFiltering)
+  const [state, dispatch] = useComboBox(
+    initialState,
+    options,
+    disableFiltering,
+    filter
+  )
 
   const containerRef = useRef<HTMLDivElement>(null)
   const itemRef = useRef<HTMLLIElement>(null)
diff --git a/src/components/forms/ComboBox/useComboBox.ts b/src/components/forms/ComboBox/useComboBox.ts
index 853149be8b..edfbb934e0 100644
--- a/src/components/forms/ComboBox/useComboBox.ts
+++ b/src/components/forms/ComboBox/useComboBox.ts
@@ -1,6 +1,7 @@
 import React, { useReducer } from 'react'
-import type { ComboBoxOption } from './ComboBox'
+import type { ComboBoxOption, CustomizableFilter } from './ComboBox'
 import { FocusMode } from './ComboBox'
+import { generateDynamicRegExp } from './utils'
 
 export enum ActionTypes {
   SELECT_OPTION,
@@ -42,7 +43,6 @@ export interface State {
   selectedOption?: ComboBoxOption
   focusedOption?: ComboBoxOption
   focusMode: FocusMode
-  filter?: string
   filteredOptions: ComboBoxOption[]
   inputValue: string
 }
@@ -50,18 +50,20 @@ export interface State {
 export const useComboBox = (
   initialState: State,
   optionsList: ComboBoxOption[],
-  disableFiltering = false
+  disableFiltering: boolean,
+  customizableFilter: CustomizableFilter
 ): [State, React.Dispatch<Action>] => {
-  const isPartialMatch = (
-    needle: string
-  ): ((event: ComboBoxOption) => boolean) => {
-    return (option: ComboBoxOption): boolean =>
-      option.label.toLowerCase().includes(needle.toLowerCase())
+  const filterOptions = (needle: string): ComboBoxOption[] => {
+    const regex = generateDynamicRegExp(
+      customizableFilter.filter,
+      needle,
+      customizableFilter.extras
+    )
+    return optionsList.filter((option) =>
+      regex.test(option.label.toLowerCase())
+    )
   }
 
-  const filterOptions = (needle: string): ComboBoxOption[] =>
-    disableFiltering ? optionsList : optionsList.filter(isPartialMatch(needle))
-
   const reducer = (state: State, action: Action): State => {
     switch (action.type) {
       case ActionTypes.SELECT_OPTION:
@@ -71,14 +73,12 @@ export const useComboBox = (
           selectedOption: action.option,
           focusMode: FocusMode.Input,
           inputValue: action.option.label,
-          filter: undefined,
           filteredOptions: optionsList,
         }
       case ActionTypes.UPDATE_FILTER: {
         const newState = {
           ...state,
           isOpen: true,
-          filter: action.value,
           filteredOptions: filterOptions(action.value),
           inputValue: action.value,
         }
@@ -133,7 +133,6 @@ export const useComboBox = (
           isOpen: false,
           focusMode: FocusMode.Input,
           selectedOption: undefined,
-          filter: undefined,
           filteredOptions: optionsList,
         }
       case ActionTypes.BLUR: {
@@ -142,10 +141,7 @@ export const useComboBox = (
           isOpen: false,
           focusMode: FocusMode.None,
           focusedOption: undefined,
-        }
-
-        if (state.filteredOptions.length === 0) {
-          newState.filteredOptions = optionsList
+          filteredOptions: optionsList,
         }
 
         if (!state.selectedOption) {
diff --git a/src/components/forms/ComboBox/utils.ts b/src/components/forms/ComboBox/utils.ts
index 5b8111525d..eff72b8cbd 100644
--- a/src/components/forms/ComboBox/utils.ts
+++ b/src/components/forms/ComboBox/utils.ts
@@ -1,14 +1,15 @@
+/* eslint-disable security/detect-non-literal-regexp */
 /**
  * Generate a dynamic regular expression based off of a replaceable and possibly filtered value.
  *
- * @param {string} el An element within the combo box component
+ * @param {string} filter The base filter to use. May be extended by `extras`.
  * @param {string} query The value to use in the regular expression
  * @param {object} extras An object of regular expressions to replace and filter the query
  */
-const generateDynamicRegExp = (
+export const generateDynamicRegExp = (
   filter: string,
   query = '',
-  extras: Record<string, string>
+  extras: Record<string, string> = {}
 ): RegExp => {
   const escapeRegExp = (text: string): string => {
     return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')
diff --git a/src/components/forms/TimePicker/TimePicker.tsx b/src/components/forms/TimePicker/TimePicker.tsx
index 13e5030d8a..aa29179712 100644
--- a/src/components/forms/TimePicker/TimePicker.tsx
+++ b/src/components/forms/TimePicker/TimePicker.tsx
@@ -10,8 +10,8 @@ import {
   DEFAULT_MIN_TIME,
   DEFAULT_MIN_TIME_MINUTES,
   DEFAULT_STEP,
-  FILTER_DATASET,
   MIN_STEP,
+  TIME_PICKER_CUSTOM_FILTER,
 } from './constants'
 
 interface BaseTimePickerProps {
@@ -75,6 +75,7 @@ export const TimePicker = ({
         defaultValue={defaultValue}
         options={timeOptions}
         disabled={disabled}
+        customFilter={TIME_PICKER_CUSTOM_FILTER}
         disableFiltering
       />
     </FormGroup>
diff --git a/src/components/forms/TimePicker/constants.ts b/src/components/forms/TimePicker/constants.ts
index 11ec37c635..84b36e182a 100644
--- a/src/components/forms/TimePicker/constants.ts
+++ b/src/components/forms/TimePicker/constants.ts
@@ -1,3 +1,5 @@
+import { CustomizableFilter } from '../ComboBox/ComboBox'
+
 export const DEFAULT_MAX_TIME = '23:59'
 export const DEFAULT_MAX_TIME_MINUTES = 24 * 60 - 1
 export const DEFAULT_MIN_TIME = '00:00'
@@ -5,10 +7,12 @@ export const DEFAULT_MIN_TIME_MINUTES = 0
 export const DEFAULT_STEP = 30
 export const MIN_STEP = 1
 
-export const FILTER_DATASET = {
+export const TIME_PICKER_CUSTOM_FILTER: CustomizableFilter = {
   filter:
     '0?{{ hourQueryFilter }}:{{minuteQueryFilter}}.*{{ apQueryFilter }}m?',
-  apQueryFilter: '([ap])',
-  hourQueryFilter: '([1-9][0-2]?)',
-  minuteQueryFilter: '[\\d]+:([0-9]{0,2})',
+  extras: {
+    apQueryFilter: '([ap])',
+    hourQueryFilter: '([1-9][0-2]?)',
+    minuteQueryFilter: '[\\d]+:([0-9]{0,2})',
+  },
 }

From eef8bfa696ade71260f348a0d92ea3511e9c80cd Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 16:00:51 -0400
Subject: [PATCH 09/24] Fix several differences with USWDS Combobox

- Allow TimePickerTests to run (mock scroll function)
- Track "closest match" for styling first matching item when filtering the list is disabled
- hide clear button when tpying in combobox
- Update old bug test to succesfully check style
---
 .../forms/ComboBox/ComboBox.test.tsx          | 59 ++++++++++---------
 src/components/forms/ComboBox/ComboBox.tsx    | 37 +++++++-----
 src/components/forms/ComboBox/useComboBox.ts  | 40 +++++++++----
 .../forms/TimePicker/TimePicker.test.tsx      |  2 +
 4 files changed, 87 insertions(+), 51 deletions(-)

diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index 1d46e268c4..413c74ff7e 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -127,8 +127,7 @@ describe('ComboBox component', () => {
     expect(getByTestId('combo-box-option-list')).toBeVisible()
   })
 
-  xit('highlights the first option when opening the menu, when no default value exists', () => {
-    // TODO: 🐛 right now highlights nothing
+  it('highlights the first option when opening the menu, when no default value exists', () => {
     const { getByTestId } = render(
       <ComboBox
         id="favorite-fruit"
@@ -138,12 +137,13 @@ describe('ComboBox component', () => {
       />
     )
 
-    userEvent.click(getByTestId('combo-box-input'))
+    const firstItem = getByTestId('combo-box-option-list').children[0]
 
-    expect(getByTestId('combo-box-option-apple')).toHaveAttribute(
-      'aria-selected',
-      'true'
-    )
+    userEvent.click(getByTestId('combo-box-toggle'))
+
+    expect(firstItem).toBeVisible()
+    expect(firstItem).not.toHaveFocus()
+    expect(firstItem).toHaveClass('usa-combo-box__list-option--focused')
   })
 
   it('highlights the default value when opening the menu, when one exists', () => {
@@ -369,6 +369,27 @@ describe('ComboBox component', () => {
         fruitOptions.length
       )
     })
+
+    it('resets the list of items if filtered then blurred without selecting an element', () => {
+      const { getByTestId } = render(
+        <ComboBox
+          id="favorite-fruit"
+          name="favorite-fruit"
+          options={fruitOptions}
+          onChange={jest.fn()}
+        />
+      )
+
+      const input = getByTestId('combo-box-input')
+      const optionsList = getByTestId('combo-box-option-list')
+
+      userEvent.type(input, 'apple')
+      expect(optionsList.children.length).toBeLessThan(fruitOptions.length)
+
+      fireEvent.blur(input)
+      expect(input).toHaveTextContent('')
+      expect(optionsList.children.length).toEqual(fruitOptions.length)
+    })
   })
 
   describe('clear button', () => {
@@ -839,7 +860,7 @@ describe('ComboBox component', () => {
       expect(getByTestId('combo-box-option-list')).toBeVisible()
     })
 
-    it('deselects option when pressing delete inside input', () => {
+    it('hides the clear button when typing in the input, but does not clear the selection', () => {
       const { getByTestId } = render(
         <ComboBox
           id="favorite-fruit"
@@ -855,6 +876,9 @@ describe('ComboBox component', () => {
 
       expect(getByTestId('combo-box-clear-button')).not.toBeVisible()
       expect(getByTestId('combo-box-option-list').children.length).toEqual(1)
+
+      fireEvent.blur(input)
+      expect
     })
 
     it('does not hijack focus while tabbing when another field has focus', () => {
@@ -1263,23 +1287,4 @@ describe('ComboBox component', () => {
       expect(firstItem).toHaveTextContent('NOTHING')
     })
   })
-
-  it('applies the focus class to the first item in the list when opened and no item is selected', () => {
-    const { getByTestId } = render(
-      <ComboBox
-        id="favorite-fruit"
-        name="favorite-fruit"
-        options={fruitOptions}
-        onChange={jest.fn()}
-      />
-    )
-
-    const firstItem = getByTestId('combo-box-option-list').children[0]
-
-    userEvent.click(getByTestId('combo-box-toggle'))
-
-    expect(firstItem).toBeVisible()
-    expect(firstItem).not.toHaveFocus()
-    expect(firstItem).toHaveClass('usa-combo-box__list-option--focused')
-  })
 })
diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index a9b436c93f..84bb0facef 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -112,6 +112,7 @@ export const ComboBox = ({
     focusMode: FocusMode.None,
     filteredOptions: options,
     inputValue: defaultOption ? defaultOption.label : '',
+    closestMatch: defaultOption ? defaultOption : options[0],
   }
 
   const [state, dispatch] = useComboBox(
@@ -122,7 +123,8 @@ export const ComboBox = ({
   )
 
   const containerRef = useRef<HTMLDivElement>(null)
-  const itemRef = useRef<HTMLLIElement>(null)
+  const focusedItemRef = useRef<HTMLLIElement>(null)
+  const closestMatchRef = useRef<HTMLLIElement>(null)
 
   useEffect(() => {
     onChange && onChange(state.selectedOption?.value || undefined)
@@ -132,17 +134,19 @@ export const ComboBox = ({
     if (
       state.focusMode === FocusMode.Item &&
       state.focusedOption &&
-      itemRef.current
+      focusedItemRef.current
     ) {
-      itemRef.current.focus()
+      focusedItemRef.current.focus()
     }
   }, [state.focusMode, state.focusedOption])
 
+  // When opened, the list should scroll to the closest match.
   useEffect(() => {
-    if (state.isOpen && state.selectedOption && itemRef.current) {
-      itemRef.current.scrollIntoView(false)
+    if (state.isOpen && state.closestMatch && closestMatchRef.current) {
+      console.log('scrolling...')
+      closestMatchRef.current.scrollIntoView(false)
     }
-  }, [state.isOpen])
+  }, [state.isOpen, state.closestMatch])
 
   // If the focused element (activeElement) is outside of the combo box,
   // make sure the focusMode is BLUR
@@ -285,8 +289,11 @@ export const ComboBox = ({
     }
   }
 
+  const isPristine =
+    state.selectedOption && state.selectedOption.label === state.inputValue
+
   const containerClasses = classnames('usa-combo-box', className, {
-    'usa-combo-box--pristine': state.selectedOption,
+    'usa-combo-box--pristine': isPristine,
   })
   const listID = `combobox-${name}-list`
   const assistiveHintID = `combobox-${name}-assistive-hint`
@@ -336,7 +343,7 @@ export const ComboBox = ({
           onClick={(): void => dispatch({ type: ActionTypes.CLEAR })}
           data-testid="combo-box-clear-button"
           onKeyDown={handleClearKeyDown}
-          hidden={!state.selectedOption}>
+          hidden={!isPristine}>
           &nbsp;
         </button>
       </span>
@@ -366,19 +373,21 @@ export const ComboBox = ({
         className="usa-combo-box__list"
         role="listbox"
         hidden={!state.isOpen}>
+        {console.log('Rendering Options', state)}
         {state.filteredOptions.map((option, index) => {
-          const focused =
-            option === state.focusedOption ||
-            (!state.focusedOption && option === options[0])
+          const focused = option === state.focusedOption
+          const closestMatch = option === state.closestMatch
           const selected = option === state.selectedOption
           const itemClasses = classnames('usa-combo-box__list-option', {
-            'usa-combo-box__list-option--focused': focused,
+            'usa-combo-box__list-option--focused': focused || closestMatch,
             'usa-combo-box__list-option--selected': selected,
           })
 
           return (
             <li
-              ref={focused ? itemRef : null}
+              ref={
+                focused ? focusedItemRef : closestMatch ? closestMatchRef : null
+              }
               value={option.value}
               key={option.value}
               className={itemClasses}
@@ -391,7 +400,7 @@ export const ComboBox = ({
               onKeyDown={handleListItemKeyDown}
               onBlur={handleListItemBlur}
               data-testid={`combo-box-option-${option.value}`}
-              onMouseMove={(): void =>
+              onMouseEnter={(): void =>
                 dispatch({ type: ActionTypes.FOCUS_OPTION, option: option })
               }
               onClick={(): void => {
diff --git a/src/components/forms/ComboBox/useComboBox.ts b/src/components/forms/ComboBox/useComboBox.ts
index edfbb934e0..0a00098b66 100644
--- a/src/components/forms/ComboBox/useComboBox.ts
+++ b/src/components/forms/ComboBox/useComboBox.ts
@@ -38,6 +38,7 @@ export type Action =
   | {
       type: ActionTypes.BLUR
     }
+
 export interface State {
   isOpen: boolean
   selectedOption?: ComboBoxOption
@@ -45,6 +46,12 @@ export interface State {
   focusMode: FocusMode
   filteredOptions: ComboBoxOption[]
   inputValue: string
+  closestMatch?: ComboBoxOption
+}
+
+interface FilterResults {
+  closestMatch: ComboBoxOption
+  optionsToDisplay: ComboBoxOption[]
 }
 
 export const useComboBox = (
@@ -53,18 +60,26 @@ export const useComboBox = (
   disableFiltering: boolean,
   customizableFilter: CustomizableFilter
 ): [State, React.Dispatch<Action>] => {
-  const filterOptions = (needle: string): ComboBoxOption[] => {
+  const getPotentialMatches = (needle: string): FilterResults => {
     const regex = generateDynamicRegExp(
       customizableFilter.filter,
       needle,
       customizableFilter.extras
     )
-    return optionsList.filter((option) =>
+    const filteredOptions = optionsList.filter((option) =>
       regex.test(option.label.toLowerCase())
     )
+
+    return {
+      closestMatch: filteredOptions[0],
+      optionsToDisplay: disableFiltering ? optionsList : filteredOptions,
+    }
   }
 
   const reducer = (state: State, action: Action): State => {
+    console.log(ActionTypes[action.type], action)
+    console.log('State:', state)
+
     switch (action.type) {
       case ActionTypes.SELECT_OPTION:
         return {
@@ -74,20 +89,19 @@ export const useComboBox = (
           focusMode: FocusMode.Input,
           inputValue: action.option.label,
           filteredOptions: optionsList,
+          closestMatch: action.option,
         }
       case ActionTypes.UPDATE_FILTER: {
+        const { closestMatch, optionsToDisplay } = getPotentialMatches(
+          action.value
+        )
+
         const newState = {
           ...state,
           isOpen: true,
-          filteredOptions: filterOptions(action.value),
+          filteredOptions: optionsToDisplay,
           inputValue: action.value,
-        }
-
-        if (
-          state.selectedOption &&
-          state.selectedOption.label !== action.value
-        ) {
-          newState.selectedOption = undefined
+          closestMatch: closestMatch,
         }
 
         return newState
@@ -125,6 +139,7 @@ export const useComboBox = (
           isOpen: true,
           focusedOption: action.option,
           focusMode: FocusMode.Item,
+          closestMatch: action.option,
         }
       case ActionTypes.CLEAR:
         return {
@@ -134,6 +149,7 @@ export const useComboBox = (
           focusMode: FocusMode.Input,
           selectedOption: undefined,
           filteredOptions: optionsList,
+          closestMatch: undefined,
         }
       case ActionTypes.BLUR: {
         const newState = {
@@ -146,6 +162,10 @@ export const useComboBox = (
 
         if (!state.selectedOption) {
           newState.inputValue = ''
+          newState.closestMatch = optionsList[0]
+        } else {
+          newState.inputValue = state.selectedOption.label
+          newState.closestMatch = state.selectedOption
         }
 
         return newState
diff --git a/src/components/forms/TimePicker/TimePicker.test.tsx b/src/components/forms/TimePicker/TimePicker.test.tsx
index 8d77f9e934..4b37736087 100644
--- a/src/components/forms/TimePicker/TimePicker.test.tsx
+++ b/src/components/forms/TimePicker/TimePicker.test.tsx
@@ -5,6 +5,8 @@ import { TimePicker } from './TimePicker'
 import userEvent from '@testing-library/user-event'
 
 describe('TimePicker Component', () => {
+  window.HTMLElement.prototype.scrollIntoView = jest.fn()
+
   beforeEach(() => {
     jest.clearAllMocks()
   })

From 02e1310afd28fd31f6917581bc826d771fa99ea0 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 16:11:33 -0400
Subject: [PATCH 10/24] Remove console.logs

---
 src/components/forms/ComboBox/ComboBox.tsx   |  1 -
 src/components/forms/ComboBox/useComboBox.ts | 10 ++++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 84bb0facef..0d7dca1363 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -373,7 +373,6 @@ export const ComboBox = ({
         className="usa-combo-box__list"
         role="listbox"
         hidden={!state.isOpen}>
-        {console.log('Rendering Options', state)}
         {state.filteredOptions.map((option, index) => {
           const focused = option === state.focusedOption
           const closestMatch = option === state.closestMatch
diff --git a/src/components/forms/ComboBox/useComboBox.ts b/src/components/forms/ComboBox/useComboBox.ts
index 0a00098b66..1d3041c9d7 100644
--- a/src/components/forms/ComboBox/useComboBox.ts
+++ b/src/components/forms/ComboBox/useComboBox.ts
@@ -77,9 +77,6 @@ export const useComboBox = (
   }
 
   const reducer = (state: State, action: Action): State => {
-    console.log(ActionTypes[action.type], action)
-    console.log('State:', state)
-
     switch (action.type) {
       case ActionTypes.SELECT_OPTION:
         return {
@@ -101,7 +98,12 @@ export const useComboBox = (
           isOpen: true,
           filteredOptions: optionsToDisplay,
           inputValue: action.value,
-          closestMatch: closestMatch,
+        }
+
+        if (disableFiltering || !state.selectedOption) {
+          newState.closestMatch = closestMatch
+        } else if (state.selectedOption) {
+          newState.closestMatch = state.selectedOption
         }
 
         return newState

From a3a6797e6d2f4881e67eab00a0514546584e8687 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 17:16:32 -0400
Subject: [PATCH 11/24] Add TimePicker tests. Make ComboBox closestMatch always
 have a value

---
 src/components/forms/ComboBox/ComboBox.tsx    |  18 ++-
 src/components/forms/ComboBox/useComboBox.ts  |   4 +-
 .../forms/TimePicker/TimePicker.test.tsx      | 139 +++++++++++++++++-
 3 files changed, 151 insertions(+), 10 deletions(-)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 0d7dca1363..bbb779ac52 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -140,10 +140,9 @@ export const ComboBox = ({
     }
   }, [state.focusMode, state.focusedOption])
 
-  // When opened, the list should scroll to the closest match.
+  // When opened, the list should scroll to the closest match
   useEffect(() => {
     if (state.isOpen && state.closestMatch && closestMatchRef.current) {
-      console.log('scrolling...')
       closestMatchRef.current.scrollIntoView(false)
     }
   }, [state.isOpen, state.closestMatch])
@@ -167,7 +166,10 @@ export const ComboBox = ({
       event.preventDefault()
       dispatch({
         type: ActionTypes.FOCUS_OPTION,
-        option: state.selectedOption || state.filteredOptions[0],
+        option:
+          state.selectedOption ||
+          state.closestMatch ||
+          state.filteredOptions[0],
       })
     } else if (event.key === 'Tab') {
       // Clear button is not visible in this case so manually handle focus
@@ -176,9 +178,12 @@ export const ComboBox = ({
         // If there are "No Results Found", tab over to prevent a keyboard trap
         if (state.filteredOptions.length > 0) {
           event.preventDefault()
+          const option = disableFiltering
+            ? state.closestMatch
+            : state.selectedOption || state.closestMatch
           dispatch({
             type: ActionTypes.FOCUS_OPTION,
-            option: state.filteredOptions[0],
+            option: option,
           })
         } else {
           dispatch({
@@ -274,10 +279,13 @@ export const ComboBox = ({
       dispatch({ type: ActionTypes.CLOSE_LIST })
     } else if (event.key === 'Tab' || event.key === 'Enter') {
       event.preventDefault()
+      const option = disableFiltering
+        ? state.closestMatch
+        : state.focusedOption || state.closestMatch
       if (state.focusedOption) {
         dispatch({
           type: ActionTypes.SELECT_OPTION,
-          option: state.focusedOption,
+          option: option,
         })
       }
     } else if (event.key === 'ArrowDown' || event.key === 'Down') {
diff --git a/src/components/forms/ComboBox/useComboBox.ts b/src/components/forms/ComboBox/useComboBox.ts
index 1d3041c9d7..b13e821b83 100644
--- a/src/components/forms/ComboBox/useComboBox.ts
+++ b/src/components/forms/ComboBox/useComboBox.ts
@@ -46,7 +46,7 @@ export interface State {
   focusMode: FocusMode
   filteredOptions: ComboBoxOption[]
   inputValue: string
-  closestMatch?: ComboBoxOption
+  closestMatch: ComboBoxOption
 }
 
 interface FilterResults {
@@ -151,7 +151,7 @@ export const useComboBox = (
           focusMode: FocusMode.Input,
           selectedOption: undefined,
           filteredOptions: optionsList,
-          closestMatch: undefined,
+          closestMatch: optionsList[0],
         }
       case ActionTypes.BLUR: {
         const newState = {
diff --git a/src/components/forms/TimePicker/TimePicker.test.tsx b/src/components/forms/TimePicker/TimePicker.test.tsx
index 4b37736087..35268df7bd 100644
--- a/src/components/forms/TimePicker/TimePicker.test.tsx
+++ b/src/components/forms/TimePicker/TimePicker.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { fireEvent, render } from '@testing-library/react'
 
 import { TimePicker } from './TimePicker'
 import userEvent from '@testing-library/user-event'
@@ -51,13 +51,146 @@ describe('TimePicker Component', () => {
 
     userEvent.click(elementToSelect)
     expect(testProps.onChange).toHaveBeenCalledTimes(1)
-    expect(elementToSelect).toHaveClass('usa-combo-box__list-option--selected')
+    expect(elementToSelect).toHaveClass(
+      'usa-combo-box__list-option--focused usa-combo-box__list-option--selected'
+    )
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
+    expect(comboBoxDropdownList).not.toBeVisible()
+    expect(comboBoxTextInput).toHaveValue(elementToSelect.textContent)
+    expect(comboBoxClearButton).toBeVisible()
+  })
+
+  it('allows the user to select a time using the keyboard typing an exact match', () => {
+    const { getByTestId } = render(<TimePicker {...testProps} />)
+
+    const comboBoxTextInput = getByTestId('combo-box-input')
+    const comboBoxDropdownList = getByTestId('combo-box-option-list')
+    const elementToSelect = getByTestId('combo-box-option-17:30')
+    const comboBoxClearButton = getByTestId('combo-box-clear-button')
+
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
+    expect(comboBoxDropdownList).not.toBeVisible()
+    expect(comboBoxClearButton).not.toBeVisible()
+
+    // Click on the TimePicker input
+    userEvent.click(comboBoxTextInput)
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'true')
+    expect(comboBoxDropdownList).toBeVisible()
+
+    // Select a time
+    jest.clearAllMocks()
+
+    userEvent.type(comboBoxTextInput, '5:30pm')
+    expect(elementToSelect).toHaveClass('usa-combo-box__list-option--focused')
+    expect(elementToSelect).not.toHaveFocus()
+
+    userEvent.type(comboBoxTextInput, '{enter}')
+    expect(testProps.onChange).toHaveBeenCalledTimes(1)
+    expect(elementToSelect).toHaveClass(
+      'usa-combo-box__list-option--focused usa-combo-box__list-option--selected'
+    )
     expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
     expect(comboBoxDropdownList).not.toBeVisible()
     expect(comboBoxTextInput).toHaveValue(elementToSelect.textContent)
     expect(comboBoxClearButton).toBeVisible()
   })
 
+  it('allows pre-selection of an element via pattern matching', () => {
+    const { getByTestId } = render(<TimePicker {...testProps} />)
+
+    const comboBoxTextInput = getByTestId('combo-box-input')
+    const comboBoxDropdownList = getByTestId('combo-box-option-list')
+    const elementToSelect = getByTestId('combo-box-option-17:30')
+    const comboBoxClearButton = getByTestId('combo-box-clear-button')
+
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
+    expect(comboBoxDropdownList).not.toBeVisible()
+    expect(comboBoxClearButton).not.toBeVisible()
+
+    // Click on the TimePicker input
+    userEvent.click(comboBoxTextInput)
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'true')
+    expect(comboBoxDropdownList).toBeVisible()
+
+    // Select a time
+    jest.clearAllMocks()
+
+    userEvent.type(comboBoxTextInput, '5:3p')
+    expect(elementToSelect).toHaveClass('usa-combo-box__list-option--focused')
+    expect(elementToSelect).not.toHaveFocus()
+
+    fireEvent.keyDown(comboBoxTextInput, { key: 'ArrowDown' })
+    expect(elementToSelect).toHaveClass('usa-combo-box__list-option--focused')
+    expect(elementToSelect).toHaveFocus()
+
+    userEvent.type(elementToSelect, '{enter}')
+    expect(testProps.onChange).toHaveBeenCalledTimes(1)
+    expect(elementToSelect).toHaveClass(
+      'usa-combo-box__list-option--focused usa-combo-box__list-option--selected'
+    )
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
+    expect(comboBoxDropdownList).not.toBeVisible()
+    expect(comboBoxTextInput).toHaveValue(elementToSelect.textContent)
+    expect(comboBoxClearButton).toBeVisible()
+  })
+
+  it('does not filter options from the list, but does apply styling to first match', () => {
+    const { getByTestId } = render(<TimePicker {...testProps} />)
+
+    const comboBoxTextInput = getByTestId('combo-box-input')
+    const comboBoxDropdownList = getByTestId('combo-box-option-list')
+    const fiveAm = getByTestId('combo-box-option-05:00')
+    const fiveThirtyAm = getByTestId('combo-box-option-05:30')
+    const fiveThirtyPm = getByTestId('combo-box-option-17:30')
+    const comboBoxClearButton = getByTestId('combo-box-clear-button')
+
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
+    expect(comboBoxDropdownList).not.toBeVisible()
+    expect(comboBoxClearButton).not.toBeVisible()
+
+    // Click on the TimePicker input
+    userEvent.click(comboBoxTextInput)
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'true')
+    expect(comboBoxDropdownList).toBeVisible()
+    expect(comboBoxDropdownList.children.length).toEqual(48)
+
+    jest.clearAllMocks()
+
+    // Start typing to filter by hour
+    userEvent.type(comboBoxTextInput, '5')
+    expect(fiveAm).toHaveClass('usa-combo-box__list-option--focused')
+    expect(fiveAm).not.toHaveFocus()
+    expect(comboBoxDropdownList.children.length).toEqual(48)
+
+    // Continue typing to filter by half hour
+    userEvent.type(comboBoxTextInput, ':3')
+    expect(fiveThirtyAm).toHaveClass('usa-combo-box__list-option--focused')
+    expect(fiveThirtyAm).not.toHaveFocus()
+    expect(comboBoxDropdownList.children.length).toEqual(48)
+
+    // Continue typing to filter by am/pm
+    userEvent.type(comboBoxTextInput, 'p')
+    expect(fiveThirtyPm).toHaveClass('usa-combo-box__list-option--focused')
+    expect(fiveThirtyPm).not.toHaveFocus()
+    expect(comboBoxDropdownList.children.length).toEqual(48)
+
+    // Focus the element by pressing the down key
+    fireEvent.keyDown(comboBoxTextInput, { key: 'ArrowDown' })
+    expect(fiveThirtyPm).toHaveClass('usa-combo-box__list-option--focused')
+    expect(fiveThirtyPm).toHaveFocus()
+
+    // Select the element by pressing enter
+    userEvent.type(fiveThirtyPm, '{enter}')
+    expect(testProps.onChange).toHaveBeenCalledTimes(1)
+    expect(fiveThirtyPm).toHaveClass(
+      'usa-combo-box__list-option--focused usa-combo-box__list-option--selected'
+    )
+    expect(comboBoxTextInput).toHaveAttribute('aria-expanded', 'false')
+    expect(comboBoxDropdownList).not.toBeVisible()
+    expect(comboBoxTextInput).toHaveValue(fiveThirtyPm.textContent)
+    expect(comboBoxClearButton).toBeVisible()
+  })
+
   it('allows the user to clear the input', () => {
     const { getByTestId } = render(
       <TimePicker {...testProps} defaultValue="00:00" />
@@ -69,7 +202,7 @@ describe('TimePicker Component', () => {
     expect(comboBoxClearButton).toBeVisible()
     expect(comboBoxTextInput).toHaveValue('12:00am')
 
-    //Clear the input
+    // Clear the input
     jest.clearAllMocks()
 
     userEvent.click(comboBoxClearButton)

From 71c1ff45a46900b07566a4135a02410acc653860 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 17:35:54 -0400
Subject: [PATCH 12/24] Add test to verify disableFiltering does not hide items

---
 .../forms/ComboBox/ComboBox.test.tsx          | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index 413c74ff7e..2f63dfc091 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -390,6 +390,26 @@ describe('ComboBox component', () => {
       expect(input).toHaveTextContent('')
       expect(optionsList.children.length).toEqual(fruitOptions.length)
     })
+
+    it('does not hide items when disableFiltering is selected', () => {
+      const { getByTestId } = render(
+        <ComboBox
+          id="favorite-fruit"
+          name="favorite-fruit"
+          options={fruitOptions}
+          onChange={jest.fn()}
+          disableFiltering
+        />
+      )
+
+      const input = getByTestId('combo-box-input')
+      userEvent.click(input)
+      userEvent.type(input, 'zzzzzzzzzz')
+
+      expect(getByTestId('combo-box-option-list').children.length).toBe(
+        fruitOptions.length
+      )
+    })
   })
 
   describe('clear button', () => {

From 79ac478931ab811268d25beb692a59c7d68f90ad Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 17:37:07 -0400
Subject: [PATCH 13/24] When no match is found and not filtering, closest is
 first item

---
 src/components/forms/ComboBox/useComboBox.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/forms/ComboBox/useComboBox.ts b/src/components/forms/ComboBox/useComboBox.ts
index b13e821b83..72bc9054f7 100644
--- a/src/components/forms/ComboBox/useComboBox.ts
+++ b/src/components/forms/ComboBox/useComboBox.ts
@@ -70,9 +70,13 @@ export const useComboBox = (
       regex.test(option.label.toLowerCase())
     )
 
+    const closestMatch =
+      filteredOptions.length > 0 ? filteredOptions[0] : optionsList[0]
+    const optionsToDisplay = disableFiltering ? optionsList : filteredOptions
+
     return {
-      closestMatch: filteredOptions[0],
-      optionsToDisplay: disableFiltering ? optionsList : filteredOptions,
+      closestMatch: closestMatch,
+      optionsToDisplay: optionsToDisplay,
     }
   }
 

From fd53e8696bffdacfe8dfc7cc8d7fc85d974c0af6 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 18:26:40 -0400
Subject: [PATCH 14/24] Prevent unecessary re-renders

---
 src/components/forms/ComboBox/ComboBox.tsx   | 20 ++++++++++----------
 src/components/forms/ComboBox/useComboBox.ts | 16 ++++++++++------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index bbb779ac52..545b0329c9 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -157,7 +157,7 @@ export const ComboBox = ({
         })
       }
     }
-  })
+  }, [state.focusMode])
 
   const handleInputKeyDown = (event: KeyboardEvent): void => {
     if (event.key === 'Escape') {
@@ -176,14 +176,14 @@ export const ComboBox = ({
       if (state.isOpen && !state.selectedOption) {
         // If there are filtered options, prevent default
         // If there are "No Results Found", tab over to prevent a keyboard trap
-        if (state.filteredOptions.length > 0) {
+        const optionToFocus = disableFiltering
+          ? state.closestMatch
+          : state.selectedOption || state.closestMatch
+        if (optionToFocus) {
           event.preventDefault()
-          const option = disableFiltering
-            ? state.closestMatch
-            : state.selectedOption || state.closestMatch
           dispatch({
             type: ActionTypes.FOCUS_OPTION,
-            option: option,
+            option: optionToFocus,
           })
         } else {
           dispatch({
@@ -220,7 +220,7 @@ export const ComboBox = ({
       !newTarget ||
       (newTarget instanceof Node && !containerRef.current?.contains(newTarget))
 
-    if (newTargetIsOutside) {
+    if (newTargetIsOutside && state.focusMode !== FocusMode.None) {
       dispatch({ type: ActionTypes.BLUR })
     }
   }
@@ -279,13 +279,13 @@ export const ComboBox = ({
       dispatch({ type: ActionTypes.CLOSE_LIST })
     } else if (event.key === 'Tab' || event.key === 'Enter') {
       event.preventDefault()
-      const option = disableFiltering
+      const optionToSelect = disableFiltering
         ? state.closestMatch
         : state.focusedOption || state.closestMatch
-      if (state.focusedOption) {
+      if (optionToSelect) {
         dispatch({
           type: ActionTypes.SELECT_OPTION,
-          option: option,
+          option: optionToSelect,
         })
       }
     } else if (event.key === 'ArrowDown' || event.key === 'Down') {
diff --git a/src/components/forms/ComboBox/useComboBox.ts b/src/components/forms/ComboBox/useComboBox.ts
index 72bc9054f7..be78500d5d 100644
--- a/src/components/forms/ComboBox/useComboBox.ts
+++ b/src/components/forms/ComboBox/useComboBox.ts
@@ -46,7 +46,7 @@ export interface State {
   focusMode: FocusMode
   filteredOptions: ComboBoxOption[]
   inputValue: string
-  closestMatch: ComboBoxOption
+  closestMatch?: ComboBoxOption
 }
 
 interface FilterResults {
@@ -70,13 +70,17 @@ export const useComboBox = (
       regex.test(option.label.toLowerCase())
     )
 
-    const closestMatch =
-      filteredOptions.length > 0 ? filteredOptions[0] : optionsList[0]
-    const optionsToDisplay = disableFiltering ? optionsList : filteredOptions
+    if (disableFiltering) {
+      return {
+        closestMatch:
+          filteredOptions.length > 0 ? filteredOptions[0] : optionsList[0],
+        optionsToDisplay: optionsList,
+      }
+    }
 
     return {
-      closestMatch: closestMatch,
-      optionsToDisplay: optionsToDisplay,
+      closestMatch: filteredOptions[0],
+      optionsToDisplay: filteredOptions,
     }
   }
 

From 1782f8f8fe28dd29fdb21d7ff4d1b86b0eb76d25 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 18:49:17 -0400
Subject: [PATCH 15/24] Match USWDS behavior on enter with option selected

---
 .../forms/ComboBox/ComboBox.test.tsx          | 23 ++++++++++++-
 src/components/forms/ComboBox/ComboBox.tsx    | 34 ++++++++++++-------
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index 2f63dfc091..ff732f172f 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -599,6 +599,27 @@ describe('ComboBox component', () => {
       )
     })
 
+    it('does reverts to the selected option when there is no input and enter is pressed', () => {
+      const { getByTestId } = render(
+        <ComboBox
+          id="favorite-fruit"
+          name="favorite-fruit"
+          options={fruitOptions}
+          defaultValue="avocado"
+          onChange={jest.fn()}
+        />
+      )
+
+      const input = getByTestId('combo-box-input')
+
+      userEvent.type(input, 'zzz{enter}')
+
+      expect(getByTestId('combo-box-option-list')).not.toBeVisible()
+      expect(input).toHaveValue('Avocado')
+      expect(input).toHaveFocus()
+      expect(getByTestId('combo-box-clear-button')).toBeVisible()
+    })
+
     it('focuses the first filtered option with tab', () => {
       const { getByTestId } = render(
         <ComboBox
@@ -886,7 +907,7 @@ describe('ComboBox component', () => {
           id="favorite-fruit"
           name="favorite-fruit"
           options={fruitOptions}
-          defaultValue={'avocado'}
+          defaultValue="avocado"
           onChange={jest.fn()}
         />
       )
diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 545b0329c9..274e72e600 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -197,19 +197,27 @@ export const ComboBox = ({
           type: ActionTypes.BLUR,
         })
       }
-    } else if (event.key === 'Enter' && !state.selectedOption) {
-      event.preventDefault()
-      const selectedOption = state.filteredOptions.find(
-        (option) =>
-          option.label.toLowerCase() === state.inputValue.toLowerCase()
-      )
-      if (selectedOption) {
-        dispatch({
-          type: ActionTypes.SELECT_OPTION,
-          option: selectedOption,
-        })
-      } else {
-        dispatch({ type: ActionTypes.CLEAR })
+    } else if (event.key === 'Enter') {
+      if (state.isOpen) {
+        event.preventDefault()
+        const exactMatch = state.filteredOptions.find(
+          (option) =>
+            option.label.toLowerCase() === state.inputValue.toLowerCase()
+        )
+        if (exactMatch) {
+          dispatch({
+            type: ActionTypes.SELECT_OPTION,
+            option: exactMatch,
+          })
+        } else {
+          if (state.selectedOption) {
+            dispatch({
+              type: ActionTypes.CLOSE_LIST,
+            })
+          } else {
+            dispatch({ type: ActionTypes.CLEAR })
+          }
+        }
       }
     }
   }

From 16ef4fe17d9e9e84e295949bb1c29208f94cad23 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 19:02:07 -0400
Subject: [PATCH 16/24] Match USWDS behavior of styling closest match if
 selected is not present

---
 src/components/forms/ComboBox/useComboBox.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/ComboBox/useComboBox.ts b/src/components/forms/ComboBox/useComboBox.ts
index be78500d5d..52531cdd12 100644
--- a/src/components/forms/ComboBox/useComboBox.ts
+++ b/src/components/forms/ComboBox/useComboBox.ts
@@ -111,7 +111,11 @@ export const useComboBox = (
         if (disableFiltering || !state.selectedOption) {
           newState.closestMatch = closestMatch
         } else if (state.selectedOption) {
-          newState.closestMatch = state.selectedOption
+          if (newState.filteredOptions.includes(state.selectedOption)) {
+            newState.closestMatch = state.selectedOption
+          } else {
+            newState.closestMatch = closestMatch
+          }
         }
 
         return newState

From 8a5bbab1634434c7ab389c4f7e887dcb2b957fd4 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 19:08:00 -0400
Subject: [PATCH 17/24] Add test verifying exact match overwrite previous
 selection

---
 .../forms/ComboBox/ComboBox.test.tsx          | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index ff732f172f..8e12ab7e4a 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -599,7 +599,7 @@ describe('ComboBox component', () => {
       )
     })
 
-    it('does reverts to the selected option when there is no input and enter is pressed', () => {
+    it('reverts to the selected option when there is no input and enter is pressed', () => {
       const { getByTestId } = render(
         <ComboBox
           id="favorite-fruit"
@@ -620,6 +620,31 @@ describe('ComboBox component', () => {
       expect(getByTestId('combo-box-clear-button')).toBeVisible()
     })
 
+    it('selects the exactly matching option when an item was previously selected and enter is pressed', () => {
+      const { getByTestId } = render(
+        <ComboBox
+          id="favorite-fruit"
+          name="favorite-fruit"
+          options={fruitOptions}
+          defaultValue="avocado"
+          onChange={jest.fn()}
+        />
+      )
+
+      const input = getByTestId('combo-box-input')
+
+      for (let i = 0; i < 'avocado'.length; i++) {
+        userEvent.type(input, '{backspace}')
+      }
+
+      userEvent.type(input, 'Banana{enter}')
+
+      expect(getByTestId('combo-box-option-list')).not.toBeVisible()
+      expect(input).toHaveValue('Banana')
+      expect(input).toHaveFocus()
+      expect(getByTestId('combo-box-clear-button')).toBeVisible()
+    })
+
     it('focuses the first filtered option with tab', () => {
       const { getByTestId } = render(
         <ComboBox

From ba59881dd336a53f8215dad279fbb35ee4f7a6fa Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Wed, 14 Apr 2021 23:13:09 -0400
Subject: [PATCH 18/24] Update test name to be mrore clear

---
 src/components/forms/ComboBox/ComboBox.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index 8e12ab7e4a..31d33ce8fb 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -599,7 +599,7 @@ describe('ComboBox component', () => {
       )
     })
 
-    it('reverts to the selected option when there is no input and enter is pressed', () => {
+    it('reverts to the selected option when there is not an exact match and enter is pressed', () => {
       const { getByTestId } = render(
         <ComboBox
           id="favorite-fruit"

From dfa994b6a4daf41be4b644afee8f2d12f192cad8 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Mon, 19 Apr 2021 14:31:29 -0400
Subject: [PATCH 19/24] Update auto-scroll behavior and add tests

---
 .../forms/ComboBox/ComboBox.test.tsx          | 29 +++++++++++++++++--
 src/components/forms/ComboBox/ComboBox.tsx    | 13 +++++++--
 .../forms/TimePicker/TimePicker.test.tsx      |  7 ++++-
 3 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index 31d33ce8fb..d0c9880f4b 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -18,7 +18,8 @@ const fruitOptions = Object.entries(fruits).map(([value, key]) => ({
 }))
 
 describe('ComboBox component', () => {
-  window.HTMLElement.prototype.scrollIntoView = jest.fn()
+  const scrollFunction = jest.fn()
+  window.HTMLElement.prototype.scrollIntoView = scrollFunction
 
   it('renders without errors', () => {
     const { getByTestId } = render(
@@ -243,6 +244,27 @@ describe('ComboBox component', () => {
     'scrolls options list to the very top when the menu opens if nothing is selected'
   )
 
+  it('scrolls to the selected option when the list is opened', () => {
+    const { getByTestId } = render(
+      <ComboBox
+        id="favorite-fruit"
+        name="favorite-fruit"
+        options={fruitOptions}
+        onChange={jest.fn()}
+        defaultValue={'mango'}
+      />
+    )
+
+    const mango = getByTestId('combo-box-option-mango')
+
+    jest.clearAllMocks()
+    userEvent.click(getByTestId('combo-box-toggle'))
+    expect(mango).toHaveClass(
+      'usa-combo-box__list-option--focused usa-combo-box__list-option--selected'
+    )
+    expect(scrollFunction).toHaveBeenCalledTimes(1)
+  })
+
   describe('filtering', () => {
     it('shows all options on initial load when no default value exists', () => {
       const { getByTestId } = render(
@@ -334,6 +356,8 @@ describe('ComboBox component', () => {
       )
     })
 
+    //TODO clears filters when cleared
+
     it('shows no results message when there is no match', () => {
       const { getByTestId } = render(
         <ComboBox
@@ -1270,8 +1294,7 @@ describe('ComboBox component', () => {
   })
 
   describe('accessibility and internationalization', () => {
-    xit('adds correct aria attributes to options when no item selected', () => {
-      // TODO: 🐛 Currently no item focused, should highlighting first item in list in this case
+    it('adds correct aria attributes to options when no item selected', () => {
       const { getByTestId } = render(
         <ComboBox
           id="favorite-fruit"
diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 274e72e600..afbe47695a 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -142,8 +142,15 @@ export const ComboBox = ({
 
   // When opened, the list should scroll to the closest match
   useEffect(() => {
-    if (state.isOpen && state.closestMatch && closestMatchRef.current) {
-      closestMatchRef.current.scrollIntoView(false)
+    if (state.isOpen && state.closestMatch) {
+      if (closestMatchRef.current) {
+        closestMatchRef.current.scrollIntoView(false)
+      } else if (
+        focusedItemRef.current &&
+        state.focusMode === FocusMode.Input
+      ) {
+        focusedItemRef.current.scrollIntoView(false)
+      }
     }
   }, [state.isOpen, state.closestMatch])
 
@@ -406,7 +413,7 @@ export const ComboBox = ({
               value={option.value}
               key={option.value}
               className={itemClasses}
-              tabIndex={focused ? 0 : -1}
+              tabIndex={focused || closestMatch ? 0 : -1}
               role="option"
               aria-selected={selected}
               aria-setsize={64}
diff --git a/src/components/forms/TimePicker/TimePicker.test.tsx b/src/components/forms/TimePicker/TimePicker.test.tsx
index 35268df7bd..0f1845c3b6 100644
--- a/src/components/forms/TimePicker/TimePicker.test.tsx
+++ b/src/components/forms/TimePicker/TimePicker.test.tsx
@@ -5,7 +5,8 @@ import { TimePicker } from './TimePicker'
 import userEvent from '@testing-library/user-event'
 
 describe('TimePicker Component', () => {
-  window.HTMLElement.prototype.scrollIntoView = jest.fn()
+  const scrollFunction = jest.fn()
+  window.HTMLElement.prototype.scrollIntoView = scrollFunction
 
   beforeEach(() => {
     jest.clearAllMocks()
@@ -118,6 +119,7 @@ describe('TimePicker Component', () => {
     userEvent.type(comboBoxTextInput, '5:3p')
     expect(elementToSelect).toHaveClass('usa-combo-box__list-option--focused')
     expect(elementToSelect).not.toHaveFocus()
+    expect(scrollFunction).toHaveBeenCalledTimes(3)
 
     fireEvent.keyDown(comboBoxTextInput, { key: 'ArrowDown' })
     expect(elementToSelect).toHaveClass('usa-combo-box__list-option--focused')
@@ -161,18 +163,21 @@ describe('TimePicker Component', () => {
     expect(fiveAm).toHaveClass('usa-combo-box__list-option--focused')
     expect(fiveAm).not.toHaveFocus()
     expect(comboBoxDropdownList.children.length).toEqual(48)
+    expect(scrollFunction).toHaveBeenCalledTimes(1)
 
     // Continue typing to filter by half hour
     userEvent.type(comboBoxTextInput, ':3')
     expect(fiveThirtyAm).toHaveClass('usa-combo-box__list-option--focused')
     expect(fiveThirtyAm).not.toHaveFocus()
     expect(comboBoxDropdownList.children.length).toEqual(48)
+    expect(scrollFunction).toHaveBeenCalledTimes(2)
 
     // Continue typing to filter by am/pm
     userEvent.type(comboBoxTextInput, 'p')
     expect(fiveThirtyPm).toHaveClass('usa-combo-box__list-option--focused')
     expect(fiveThirtyPm).not.toHaveFocus()
     expect(comboBoxDropdownList.children.length).toEqual(48)
+    expect(scrollFunction).toHaveBeenCalledTimes(3)
 
     // Focus the element by pressing the down key
     fireEvent.keyDown(comboBoxTextInput, { key: 'ArrowDown' })

From 3a89764560ceda27a6ef1c419e0dcee3fde6e62b Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Mon, 19 Apr 2021 14:49:03 -0400
Subject: [PATCH 20/24] Vastly simplify confusing pseudo duplicate state

---
 src/components/forms/ComboBox/ComboBox.tsx   | 39 ++++++++------------
 src/components/forms/ComboBox/useComboBox.ts | 20 +++++-----
 2 files changed, 24 insertions(+), 35 deletions(-)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index afbe47695a..534424b694 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -112,7 +112,6 @@ export const ComboBox = ({
     focusMode: FocusMode.None,
     filteredOptions: options,
     inputValue: defaultOption ? defaultOption.label : '',
-    closestMatch: defaultOption ? defaultOption : options[0],
   }
 
   const [state, dispatch] = useComboBox(
@@ -124,7 +123,6 @@ export const ComboBox = ({
 
   const containerRef = useRef<HTMLDivElement>(null)
   const focusedItemRef = useRef<HTMLLIElement>(null)
-  const closestMatchRef = useRef<HTMLLIElement>(null)
 
   useEffect(() => {
     onChange && onChange(state.selectedOption?.value || undefined)
@@ -142,17 +140,15 @@ export const ComboBox = ({
 
   // When opened, the list should scroll to the closest match
   useEffect(() => {
-    if (state.isOpen && state.closestMatch) {
-      if (closestMatchRef.current) {
-        closestMatchRef.current.scrollIntoView(false)
-      } else if (
-        focusedItemRef.current &&
-        state.focusMode === FocusMode.Input
-      ) {
-        focusedItemRef.current.scrollIntoView(false)
-      }
+    if (
+      state.isOpen &&
+      state.focusedOption &&
+      focusedItemRef.current &&
+      state.focusMode === FocusMode.Input
+    ) {
+      focusedItemRef.current.scrollIntoView(false)
     }
-  }, [state.isOpen, state.closestMatch])
+  }, [state.isOpen, state.focusedOption])
 
   // If the focused element (activeElement) is outside of the combo box,
   // make sure the focusMode is BLUR
@@ -175,7 +171,7 @@ export const ComboBox = ({
         type: ActionTypes.FOCUS_OPTION,
         option:
           state.selectedOption ||
-          state.closestMatch ||
+          state.focusedOption ||
           state.filteredOptions[0],
       })
     } else if (event.key === 'Tab') {
@@ -184,8 +180,8 @@ export const ComboBox = ({
         // If there are filtered options, prevent default
         // If there are "No Results Found", tab over to prevent a keyboard trap
         const optionToFocus = disableFiltering
-          ? state.closestMatch
-          : state.selectedOption || state.closestMatch
+          ? state.focusedOption
+          : state.selectedOption || state.focusedOption
         if (optionToFocus) {
           event.preventDefault()
           dispatch({
@@ -294,9 +290,7 @@ export const ComboBox = ({
       dispatch({ type: ActionTypes.CLOSE_LIST })
     } else if (event.key === 'Tab' || event.key === 'Enter') {
       event.preventDefault()
-      const optionToSelect = disableFiltering
-        ? state.closestMatch
-        : state.focusedOption || state.closestMatch
+      const optionToSelect = state.focusedOption
       if (optionToSelect) {
         dispatch({
           type: ActionTypes.SELECT_OPTION,
@@ -398,22 +392,19 @@ export const ComboBox = ({
         hidden={!state.isOpen}>
         {state.filteredOptions.map((option, index) => {
           const focused = option === state.focusedOption
-          const closestMatch = option === state.closestMatch
           const selected = option === state.selectedOption
           const itemClasses = classnames('usa-combo-box__list-option', {
-            'usa-combo-box__list-option--focused': focused || closestMatch,
+            'usa-combo-box__list-option--focused': focused,
             'usa-combo-box__list-option--selected': selected,
           })
 
           return (
             <li
-              ref={
-                focused ? focusedItemRef : closestMatch ? closestMatchRef : null
-              }
+              ref={focused ? focusedItemRef : null}
               value={option.value}
               key={option.value}
               className={itemClasses}
-              tabIndex={focused || closestMatch ? 0 : -1}
+              tabIndex={focused ? 0 : -1}
               role="option"
               aria-selected={selected}
               aria-setsize={64}
diff --git a/src/components/forms/ComboBox/useComboBox.ts b/src/components/forms/ComboBox/useComboBox.ts
index 52531cdd12..6dd91dabac 100644
--- a/src/components/forms/ComboBox/useComboBox.ts
+++ b/src/components/forms/ComboBox/useComboBox.ts
@@ -46,7 +46,6 @@ export interface State {
   focusMode: FocusMode
   filteredOptions: ComboBoxOption[]
   inputValue: string
-  closestMatch?: ComboBoxOption
 }
 
 interface FilterResults {
@@ -94,7 +93,7 @@ export const useComboBox = (
           focusMode: FocusMode.Input,
           inputValue: action.option.label,
           filteredOptions: optionsList,
-          closestMatch: action.option,
+          focusedOption: action.option,
         }
       case ActionTypes.UPDATE_FILTER: {
         const { closestMatch, optionsToDisplay } = getPotentialMatches(
@@ -109,12 +108,12 @@ export const useComboBox = (
         }
 
         if (disableFiltering || !state.selectedOption) {
-          newState.closestMatch = closestMatch
+          newState.focusedOption = closestMatch
         } else if (state.selectedOption) {
           if (newState.filteredOptions.includes(state.selectedOption)) {
-            newState.closestMatch = state.selectedOption
+            newState.focusedOption = state.selectedOption
           } else {
-            newState.closestMatch = closestMatch
+            newState.focusedOption = closestMatch
           }
         }
 
@@ -125,7 +124,8 @@ export const useComboBox = (
           ...state,
           isOpen: true,
           focusMode: FocusMode.Input,
-          focusedOption: state.selectedOption,
+          focusedOption:
+            state.selectedOption || state.focusedOption || optionsList[0],
         }
       case ActionTypes.CLOSE_LIST: {
         const newState = {
@@ -153,7 +153,6 @@ export const useComboBox = (
           isOpen: true,
           focusedOption: action.option,
           focusMode: FocusMode.Item,
-          closestMatch: action.option,
         }
       case ActionTypes.CLEAR:
         return {
@@ -163,23 +162,22 @@ export const useComboBox = (
           focusMode: FocusMode.Input,
           selectedOption: undefined,
           filteredOptions: optionsList,
-          closestMatch: optionsList[0],
+          focusedOption: optionsList[0],
         }
       case ActionTypes.BLUR: {
         const newState = {
           ...state,
           isOpen: false,
           focusMode: FocusMode.None,
-          focusedOption: undefined,
           filteredOptions: optionsList,
         }
 
         if (!state.selectedOption) {
           newState.inputValue = ''
-          newState.closestMatch = optionsList[0]
+          newState.focusedOption = optionsList[0]
         } else {
           newState.inputValue = state.selectedOption.label
-          newState.closestMatch = state.selectedOption
+          newState.focusedOption = state.selectedOption
         }
 
         return newState

From 684afb9e2882ea956fc2e1baf4b4f572c1871c53 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Mon, 19 Apr 2021 15:10:28 -0400
Subject: [PATCH 21/24] Add test confirming filters are properly reset

---
 .../forms/ComboBox/ComboBox.test.tsx          | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index d0c9880f4b..210f0edd18 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -356,7 +356,39 @@ describe('ComboBox component', () => {
       )
     })
 
-    //TODO clears filters when cleared
+    it('clears filters when ComboBox is un-focused and no option was selected (implicitly clearing the ComboBox)', () => {
+      const { getByTestId } = render(
+        <>
+          <div data-testid="outside" />
+          <ComboBox
+            id="favorite-fruit"
+            name="favorite-fruit"
+            options={fruitOptions}
+            onChange={jest.fn()}
+          />
+        </>
+      )
+
+      const list = getByTestId('combo-box-option-list')
+      const input = getByTestId('combo-box-input')
+
+      // Filter the list
+      userEvent.type(input, 'Av')
+      expect(list.children.length).toEqual(2) // Avocado and Guava
+
+      // Click somewhere else
+      userEvent.click(getByTestId('outside'))
+      expect(input).toHaveTextContent('')
+      expect(list.children.length).toEqual(fruitOptions.length)
+
+      // Return the combo box
+      userEvent.click(input)
+      expect(input).toHaveTextContent('')
+      expect(list.children.length).toEqual(fruitOptions.length)
+      expect(list.children[0]).toHaveClass(
+        'usa-combo-box__list-option--focused'
+      )
+    })
 
     it('shows no results message when there is no match', () => {
       const { getByTestId } = render(

From bd36ad396dca540a67eda2d982d2362fa56aea7a Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Mon, 19 Apr 2021 15:30:33 -0400
Subject: [PATCH 22/24] Revert now-unecessary variable refactor

---
 src/components/forms/ComboBox/ComboBox.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/forms/ComboBox/ComboBox.tsx b/src/components/forms/ComboBox/ComboBox.tsx
index 534424b694..46d38a9f44 100644
--- a/src/components/forms/ComboBox/ComboBox.tsx
+++ b/src/components/forms/ComboBox/ComboBox.tsx
@@ -290,11 +290,10 @@ export const ComboBox = ({
       dispatch({ type: ActionTypes.CLOSE_LIST })
     } else if (event.key === 'Tab' || event.key === 'Enter') {
       event.preventDefault()
-      const optionToSelect = state.focusedOption
-      if (optionToSelect) {
+      if (state.focusedOption) {
         dispatch({
           type: ActionTypes.SELECT_OPTION,
-          option: optionToSelect,
+          option: state.focusedOption,
         })
       }
     } else if (event.key === 'ArrowDown' || event.key === 'Down') {

From 71e8d8012f3ad4fc9f47fe59e0f6a19e3085bdb3 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Thu, 6 May 2021 18:09:45 -0400
Subject: [PATCH 23/24] Complete test expectation

---
 src/components/forms/ComboBox/ComboBox.test.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index 380705b854..b0768b5b9c 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -1020,7 +1020,8 @@ describe('ComboBox component', () => {
       expect(getByTestId('combo-box-option-list').children.length).toEqual(1)
 
       fireEvent.blur(input)
-      expect
+
+      expect(input).toHaveValue('Avocado')
     })
 
     it('does not hijack focus while tabbing when another field has focus', () => {

From 7812a6dfacfa35877354cefa5b79d3103292ea75 Mon Sep 17 00:00:00 2001
From: Brandon Lenz <brandon@truss.works>
Date: Thu, 6 May 2021 18:11:38 -0400
Subject: [PATCH 24/24] Check for clear button to be present after blur

---
 src/components/forms/ComboBox/ComboBox.test.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/forms/ComboBox/ComboBox.test.tsx b/src/components/forms/ComboBox/ComboBox.test.tsx
index b0768b5b9c..0629b15e7a 100644
--- a/src/components/forms/ComboBox/ComboBox.test.tsx
+++ b/src/components/forms/ComboBox/ComboBox.test.tsx
@@ -1014,14 +1014,16 @@ describe('ComboBox component', () => {
       )
 
       const input = getByTestId('combo-box-input')
+      const clearButton = getByTestId('combo-box-clear-button')
       userEvent.type(input, '{backspace}')
 
-      expect(getByTestId('combo-box-clear-button')).not.toBeVisible()
+      expect(clearButton).not.toBeVisible()
       expect(getByTestId('combo-box-option-list').children.length).toEqual(1)
 
       fireEvent.blur(input)
 
       expect(input).toHaveValue('Avocado')
+      expect(clearButton).toBeVisible()
     })
 
     it('does not hijack focus while tabbing when another field has focus', () => {