feat: do not compute open state

Jujulego · Feb 9, 2025 · c476d8e · c476d8e
1 parent bf864e6
commit c476d8e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/components/search/SearchBox.tsx b/components/search/SearchBox.tsx
@@ -28,7 +28,7 @@ export default function SearchBox({ children, sx }: SearchProviderProps) {
   const listBoxRef = useRef<HTMLUListElement>(null);
 
   // Open state
-  const [_isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const handleOpen = useCallback(() => setIsOpen(true), []);
   const handleClose = useCallback(() => setIsOpen(false), []);
 
@@ -66,19 +66,20 @@ export default function SearchBox({ children, sx }: SearchProviderProps) {
   }, [router]);
 
   // Options
-  const optionsRef = useRef<OptionsRecord>({});
+  const optionsRef = useRef(new Map<string, URL>());
   const [activeOption, setActiveOption] = useState<string | null>(null);
   const [isEmpty, setIsEmpty] = useState(true);
 
   const registerOption = useCallback((id: string, target: URL) => {
-    optionsRef.current[id] = target;
+    optionsRef.current.set(id, target);
     setIsEmpty(false);
   }, []);
 
   const unregisterOption = useCallback((id: string) => {
-    delete optionsRef.current[id];
+    optionsRef.current.delete(id);
+
     setActiveOption((old) => old === id ? null : old);
-    setIsEmpty(Object.keys(optionsRef.current).length === 0);
+    setIsEmpty(optionsRef.current.size === 0);
   }, []);
 
   const handleFocusDown = useCallback(() => {
@@ -131,7 +132,7 @@ export default function SearchBox({ children, sx }: SearchProviderProps) {
     }
 
     if (optionId) {
-      const target = optionsRef.current[optionId];
+      const target = optionsRef.current.get(optionId);
 
       if (target) {
         search(target);
@@ -140,8 +141,6 @@ export default function SearchBox({ children, sx }: SearchProviderProps) {
   }, [activeOption, search]);
 
   // Render
-  const isOpen = _isOpen && !!inputValue;
-
   return (
     <SearchSurface
       isOpen={isOpen}
@@ -206,8 +205,6 @@ const SearchListBoxContainer = styled('div')({
 });
 
 // Utils
-type OptionsRecord = Partial<Record<string, URL>>;
-
 function isEnabledOption(element: Element): boolean {
   return element.role === 'option' && element.ariaDisabled !== 'false';
 }

diff --git a/components/search/SearchComboBox.tsx b/components/search/SearchComboBox.tsx
@@ -41,7 +41,8 @@ export function SearchComboBox(props: SearchComboBoxProps) {
 
   const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     onInputChange(event.currentTarget.value);
-  }, [onInputChange]);
+    onOpen();
+  }, [onInputChange, onOpen]);
 
   const handleKeyDown = useCallback((event: KeyboardEvent) => {
     switch (event.key) {
@@ -71,7 +72,8 @@ export function SearchComboBox(props: SearchComboBoxProps) {
 
   const handleClear = useCallback(() => {
     onInputChange('');
-  }, [onInputChange]);
+    onClose();
+  }, [onClose, onInputChange]);
 
   // Render
   return (