fix(Picker): fixed the issue with virtual focus when filtering the li…

…st (#1267)
livechat · Jul 31, 2024 · 0e4fd96 · 0e4fd96
1 parent a12dffe
commit 0e4fd96
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/packages/react-components/src/components/Picker/Picker.tsx b/packages/react-components/src/components/Picker/Picker.tsx
@@ -102,6 +102,7 @@ export const Picker: React.FC<IPickerProps> = ({
     useDismissHookProps,
     isOpen,
     onVisibilityChange: handleVisibilityChange,
+    searchPhrase,
   });
 
   return (

diff --git a/packages/react-components/src/components/Picker/hooks/useFloatingPicker.ts b/packages/react-components/src/components/Picker/hooks/useFloatingPicker.ts
@@ -38,6 +38,7 @@ interface UseFloatingPickerProps {
   maxListHeight: number;
   isOpen?: boolean;
   onVisibilityChange?: (open: boolean, event?: Event | undefined) => void;
+  searchPhrase?: string;
 }
 
 interface IUseFloatingPicker {
@@ -75,6 +76,7 @@ export const useFloatingPicker = ({
   useClickHookProps,
   isOpen,
   onVisibilityChange,
+  searchPhrase,
 }: UseFloatingPickerProps): IUseFloatingPicker => {
   const nodeId = useFloatingNodeId();
   const [pointer, setPointer] = React.useState(false);
@@ -83,6 +85,11 @@ export const useFloatingPicker = ({
   const listElementsRef = React.useRef<Array<HTMLElement | null>>([]);
   const virtualItemRef = React.useRef(null);
 
+  React.useEffect(() => {
+    virtualItemRef.current = null;
+    setActiveIndex(null);
+  }, [searchPhrase]);
+
   const { refs, floatingStyles, context, isPositioned } =
     useFloating<HTMLButtonElement>({
       nodeId,