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

Author: aymeric-giraudet

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>
   );
 }

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({})}>