fix: set CombBox focusMode to BLUR when focus is outside of the compo…

…nent (#989)

* trigger ActionTypes.BLUR when the DOM is focused on an element outside of component

* add combobox story that has a sibling field

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

@@ -3,7 +3,7 @@ import React from 'react'
 import { ComboBox } from './ComboBox'
 import { Form } from '../Form/Form'
 import { Label } from '../Label/Label'
-
+import { TextInput } from '../TextInput/TextInput'
 import { fruits } from './fruits'
 
 export default {
@@ -92,3 +92,25 @@ export const disabled = (): React.ReactElement => {
     </Form>
   )
 }
+
+export const withOtherFields = (): React.ReactElement => {
+  const fruitList = Object.entries(fruits).map(([value, key]) => ({
+    value: value,
+    label: key,
+  }))
+
+  return (
+    <Form onSubmit={noop}>
+      <Label htmlFor="fruit">Select a Fruit</Label>
+      <ComboBox
+        id="fruit"
+        name="fruit"
+        options={fruitList}
+        onChange={noop}
+        defaultValue="avocado"
+      />
+      <Label htmlFor="fruitDescription">Description</Label>
+      <TextInput id="fruitDescription" name="fruitDescription" type="text" />
+    </Form>
+  )
+}

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

@@ -3,6 +3,7 @@ import { render, fireEvent } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { ComboBox } from './ComboBox'
+import { TextInput } from '../TextInput/TextInput'
 import { fruits } from './fruits'
 
 /*
@@ -837,6 +838,38 @@ describe('ComboBox component', () => {
       expect(getByTestId('combo-box-option-list').children.length).toEqual(1)
     })
 
+    it('does not hijack focus while tabbing when another field has focus', () => {
+      const { getByTestId } = render(
+        <>
+          <ComboBox
+            id="favorite-fruit"
+            name="favorite-fruit"
+            options={fruitOptions}
+            onChange={jest.fn()}
+          />
+          <TextInput
+            id="input-Text"
+            name="input-Text"
+            type="text"
+            data-testid="input-Text"
+          />
+        </>
+      )
+      const comboBoxInput = getByTestId('combo-box-input')
+      const textInput = getByTestId('input-Text')
+
+      // Fill ComboBox
+      userEvent.type(comboBoxInput, 'Apple{enter}')
+
+      // Tab to next field (Text Input)
+      userEvent.tab()
+
+      // Fill text input
+      userEvent.type(textInput, 'Test 123')
+
+      expect(textInput).toHaveValue('Test 123')
+    })
+
     xit('focuses the input when an option is focused and shift-tab is pressed', () => {
       const { getByTestId } = render(
         <ComboBox

src/components/forms/ComboBox/ComboBox.tsx

@@ -120,6 +120,18 @@ export const ComboBox = (props: ComboBoxProps): React.ReactElement => {
     }
   })
 
+  // If the focused element (activeElement) is outside of the combo box,
+  // make sure the focusMode is BLUR
+  useEffect(() => {
+    if (state.focusMode !== FocusMode.None) {
+      if (!containerRef.current?.contains(window.document.activeElement)) {
+        dispatch({
+          type: ActionTypes.BLUR,
+        })
+      }
+    }
+  })
+
   const handleInputKeyDown = (event: KeyboardEvent): void => {
     if (event.key === 'Escape') {
       dispatch({ type: ActionTypes.CLOSE_LIST })