fix(react): remove dropdown from DOM when closed

francoischalifour · Feb 12, 2020 · c647224 · c647224
1 parent 610e73f
commit c647224
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/packages/autocomplete-react/Autocomplete.tsx b/packages/autocomplete-react/Autocomplete.tsx
@@ -61,13 +61,14 @@ export function Autocomplete<TItem extends {}>(
         })}
       />
 
-      <Dropdown
-        suggestions={state.suggestions}
-        isOpen={state.isOpen}
-        status={state.status}
-        getItemProps={autocomplete.current.getItemProps}
-        getMenuProps={autocomplete.current.getMenuProps}
-      />
+      {state.isOpen && (
+        <Dropdown
+          suggestions={state.suggestions}
+          status={state.status}
+          getItemProps={autocomplete.current.getItemProps}
+          getMenuProps={autocomplete.current.getMenuProps}
+        />
+      )}
     </div>
   );
 }
diff --git a/packages/autocomplete-react/Dropdown.tsx b/packages/autocomplete-react/Dropdown.tsx
@@ -5,23 +5,20 @@ import { h } from 'preact';
 import { reverseHighlightAlgoliaHit } from '../autocomplete-presets';
 
 interface DropdownProps {
-  isOpen: boolean;
   suggestions: any;
   status: string;
   getItemProps(options?: object): any;
   getMenuProps(options?: object): any;
 }
 
 export const Dropdown = ({
-  isOpen,
   status,
   suggestions,
   getItemProps,
   getMenuProps,
 }: DropdownProps) => {
   return (
     <div
-      hidden={!isOpen}
       className={[
         'algolia-autocomplete-dropdown',
         status === 'stalled' && 'algolia-autocomplete-dropdown--stalled',