blur action prop to accept onBlur event

RocketChat · Nov 16, 2023 · 64d8114 · 64d8114
1 parent c09ef5b
commit 64d8114
Showing 1 changed file with 10 additions and 2 deletions.
diff --git 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<AllHTMLAttributes<HTMLInputElement>, 'onChange'>;
+  onBlurAction?: FocusEventHandler;
+} & Omit<AllHTMLAttributes<HTMLInputElement>, '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={