clean code

apps/app/src/features/search/client/components/SearchForm.tsx

@@ -31,14 +31,18 @@ export const SearchForm = (props: Props): JSX.Element => {
   }, [onClickCloseModalButton]);
 
   const enterKeyDownHandler = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    const shouldExecuteHandler = e.key === 'Enter' && !e.nativeEvent.isComposing && highlightedIndex == null && searchKeyword.trim().length !== 0;
+    const shouldExecuteHandler = e.key === 'Enter'
+    && !e.nativeEvent.isComposing // see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/isComposing
+    && highlightedIndex == null
+    && searchKeyword.trim().length !== 0;
+
     if (shouldExecuteHandler) {
       onEnterKeyDownHandler?.();
     }
   }, [highlightedIndex, onEnterKeyDownHandler, searchKeyword]);
 
-  const inputOption = useMemo(() => {
-    return {
+  const inputOptions = useMemo(() => {
+    return getInputProps({
       type: 'search',
       placeholder: 'Search...',
       className: 'form-control',
@@ -46,8 +50,8 @@ export const SearchForm = (props: Props): JSX.Element => {
       value: searchKeyword,
       onChange: changeSearchTextHandler,
       onKeyDown: enterKeyDownHandler,
-    };
-  }, [changeSearchTextHandler, enterKeyDownHandler, searchKeyword]);
+    });
+  }, [changeSearchTextHandler, enterKeyDownHandler, getInputProps, searchKeyword]);
 
   useEffect(() => {
     if (inputRef.current != null) {
@@ -59,9 +63,7 @@ export const SearchForm = (props: Props): JSX.Element => {
     <div className="text-muted d-flex justify-content-center align-items-center">
       <span className="material-symbols-outlined fs-4 me-3">search</span>
 
-      <input
-        {...getInputProps(inputOption)}
-      />
+      <input {...inputOptions} />
 
       <button
         type="button"

apps/app/src/features/search/client/components/SearchMenuItem.tsx

@@ -13,20 +13,20 @@ type Props = {
 
 export const SearchMenuItem = (props: Props): JSX.Element => {
   const {
-    url, getItemProps, index, highlightedIndex, children,
+    url, index, highlightedIndex, getItemProps, children,
   } = props;
 
-  const itemMenuOption = useMemo(() => {
-    return {
+  const itemMenuOptions = useMemo(() => {
+    return getItemProps({
       index,
       item: { url },
       style: { backgroundColor: highlightedIndex === index ? 'lightgray' : 'white', cursor: 'pointer' },
       className: 'text-muted mb-2 d-flex',
-    };
-  }, [highlightedIndex, index, url]);
+    });
+  }, [getItemProps, highlightedIndex, index, url]);
 
   return (
-    <li {...getItemProps(itemMenuOption)}>
+    <li {...itemMenuOptions}>
       { children }
     </li>
   );

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -1,3 +1,4 @@
+
 import React, {
   useState, useCallback, useEffect,
 } from 'react';
@@ -48,12 +49,13 @@ const SearchModal = (): JSX.Element => {
           onSelect={(selectedItem: DownshiftItem) => { selectSearchMenuItemHandler(selectedItem.url) }}
         >
           {({
+            getRootProps,
             getInputProps,
             getItemProps,
             getMenuProps,
             highlightedIndex,
           }) => (
-            <div>
+            <div {...getRootProps({}, { suppressRefError: true })}>
               <SearchForm
                 highlightedIndex={highlightedIndex}
                 searchKeyword={searchKeyword}
@@ -65,9 +67,17 @@ const SearchModal = (): JSX.Element => {
 
               <ul {...getMenuProps()} className="list-unstyled">
                 <div className="border-top mt-3 mb-3" />
-                <SearchMethodMenuItem searchKeyword={searchKeyword} getItemProps={getItemProps} highlightedIndex={highlightedIndex} />
+                <SearchMethodMenuItem
+                  searchKeyword={searchKeyword}
+                  highlightedIndex={highlightedIndex}
+                  getItemProps={getItemProps}
+                />
                 <div className="border-top mt-3 mb-3" />
-                <SearchResultMenuItem searchKeyword={searchKeyword} getItemProps={getItemProps} highlightedIndex={highlightedIndex} />
+                <SearchResultMenuItem
+                  searchKeyword={searchKeyword}
+                  highlightedIndex={highlightedIndex}
+                  getItemProps={getItemProps}
+                />
               </ul>
             </div>
           )}