Fix bug: hides options list when clicking away and a specific option …

…has focus

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

@@ -932,7 +932,7 @@ describe('ComboBox component', () => {
       fireEvent.click(getByTestId('combo-box-input'))
       userEvent.hover(getByTestId('combo-box-option-blackberry'))
 
-      fireEvent.blur(getByTestId('combo-box-option-list'))
+      fireEvent.blur(getByTestId('combo-box-option-blackberry'))
 
       expect(getByTestId('combo-box-input')).toHaveAttribute(
         'aria-expanded',

src/components/forms/ComboBox/ComboBox.tsx

@@ -142,12 +142,14 @@ export const ComboBox = (props: ComboBoxProps): React.ReactElement => {
   }
 
   const handleInputBlur = (event: FocusEvent<HTMLInputElement>): void => {
+    const { target: elementLosingFocus, relatedTarget: newTarget } = event
+
     if (state.selectedOption?.value) return
-    const target = event.relatedTarget
 
     if (
-      !target ||
-      (target instanceof Node && !containerRef.current?.contains(event.target))
+      !newTarget ||
+      (newTarget instanceof Node &&
+        !containerRef.current?.contains(elementLosingFocus))
     ) {
       dispatch({ type: ActionTypes.CLEAR })
     }
@@ -175,6 +177,16 @@ export const ComboBox = (props: ComboBoxProps): React.ReactElement => {
       }
     }
   }
+  const handleListItemBlur = (event: FocusEvent<HTMLLIElement>): void => {
+    const { relatedTarget: newTarget } = event
+
+    if (
+      !newTarget ||
+      (newTarget instanceof Node && !containerRef.current?.contains(newTarget))
+    ) {
+      dispatch({ type: ActionTypes.CLOSE_LIST })
+    }
+  }
 
   const handleListItemKeyDown = (event: KeyboardEvent): void => {
     if (event.key === 'Escape') {
@@ -297,6 +309,7 @@ export const ComboBox = (props: ComboBoxProps): React.ReactElement => {
               aria-posinset={index + 1}
               id={listID + `--option-${index}`}
               onKeyDown={handleListItemKeyDown}
+              onBlur={handleListItemBlur}
               data-testid={`combo-box-option-${option.value}`}
               onMouseMove={(): void =>
                 dispatch({ type: ActionTypes.FOCUS_OPTION, option: option })