diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx index f8b7e907f1..c66c07f129 100644 --- a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx +++ b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx @@ -7,6 +7,7 @@ import type { AllHTMLAttributes, ComponentProps, ElementType, + FocusEventHandler, ReactElement, } from 'react'; import React, { useEffect, useRef, useMemo, useState } from 'react'; @@ -42,7 +43,8 @@ type AutoCompleteProps = { error?: boolean; disabled?: boolean; multiple?: boolean; -} & Omit, 'onChange'>; + onBlurAction?: FocusEventHandler; +} & Omit, 'onChange', 'onBlur'>; const getSelected = ( value: string | string[], @@ -69,6 +71,7 @@ export function AutoComplete({ error, disabled, multiple, + onBlurAction = () => {}, ...props }: AutoCompleteProps): ReactElement { const ref = useRef(); @@ -121,6 +124,11 @@ export function AutoComplete({ const [cursor, handleKeyDown, , reset, [optionsAreVisible, hide, show]] = useCursor(value, memoizedOptions, handleSelect); + const onBlur = useMutableCallback((event) => { + hide(); + onBlurAction(event); + }); + useEffect(reset, [filter]); return ( @@ -148,7 +156,7 @@ export function AutoComplete({ onChange={useMutableCallback((e) => setFilter(e.currentTarget.value) )} - onBlur={hide} + onBlur={onBlur} onFocus={show} onKeyDown={handleKeyDown} placeholder={