fix(react-renderer): panel now closes when clicking/touching outside (#…

…1045)
algolia · Nov 16, 2022 · b133e85 · b133e85
1 parent d0ca975
commit b133e85
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/examples/react-renderer/src/App.tsx b/examples/react-renderer/src/App.tsx
@@ -6,7 +6,7 @@ import './App.css';
 export function App() {
   return (
     <div className="container">
-      <Autocomplete placeholder="Search" openOnFocus={true} debug={true} />
+      <Autocomplete placeholder="Search" openOnFocus={true} />
     </div>
   );
 }
diff --git a/examples/react-renderer/src/Autocomplete.tsx b/examples/react-renderer/src/Autocomplete.tsx
@@ -89,20 +89,22 @@ export function Autocomplete(
       return undefined;
     }
 
-    const { onTouchStart, onTouchMove } = getEnvironmentProps({
+    const { onTouchStart, onTouchMove, onMouseDown } = getEnvironmentProps({
       formElement: formRef.current,
       inputElement: inputRef.current,
       panelElement: panelRef.current,
     });
 
+    window.addEventListener('mousedown', onMouseDown);
     window.addEventListener('touchstart', onTouchStart);
     window.addEventListener('touchmove', onTouchMove);
 
     return () => {
+      window.removeEventListener('mousedown', onMouseDown);
       window.removeEventListener('touchstart', onTouchStart);
       window.removeEventListener('touchmove', onTouchMove);
     };
-  }, [getEnvironmentProps, formRef, inputRef, panelRef]);
+  }, [getEnvironmentProps, autocompleteState.isOpen]);
 
   return (
     <div className="aa-Autocomplete" {...autocomplete.getRootProps({})}>