Improved props name

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

@@ -1,29 +1,28 @@
-
-import React, { useMemo } from 'react';
+import React from 'react';
 
 import type { GetItemProps } from '../interfaces/downshift';
 
 type Props = {
   url: string
   index: number
-  highlightedIndex: number | null
+  isActive: boolean
   getItemProps: GetItemProps
   children: React.ReactNode
 }
 
 export const SearchMenuItem = (props: Props): JSX.Element => {
   const {
-    url, index, highlightedIndex, getItemProps, children,
+    url, index, isActive, getItemProps, children,
   } = props;
 
-  const itemMenuOptions = useMemo(() => {
-    return getItemProps({
+  const itemMenuOptions = (
+    getItemProps({
       index,
       item: { url },
-      style: { backgroundColor: highlightedIndex === index ? 'lightgray' : 'white', cursor: 'pointer' },
+      style: { backgroundColor: isActive ? 'lightblue' : 'white', cursor: 'pointer' },
       className: 'text-muted mb-2 d-flex',
-    });
-  }, [getItemProps, highlightedIndex, index, url]);
+    })
+  );
 
   return (
     <li {...itemMenuOptions}>

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

@@ -9,14 +9,14 @@ import type { GetItemProps } from '../interfaces/downshift';
 import { SearchMenuItem } from './SearchMenuItem';
 
 type Props = {
-  highlightedIndex: number | null
+  activeIndex: number | null
   searchKeyword: string
   getItemProps: GetItemProps
 }
 
 export const SearchMethodMenuItem = (props: Props): JSX.Element => {
   const {
-    highlightedIndex, searchKeyword, getItemProps,
+    activeIndex, searchKeyword, getItemProps,
   } = props;
 
   const { t } = useTranslation('commons');
@@ -30,7 +30,7 @@ export const SearchMethodMenuItem = (props: Props): JSX.Element => {
       { shouldShowMenuItem && (
         <SearchMenuItem
           index={0}
-          highlightedIndex={highlightedIndex}
+          isActive={activeIndex === 0}
           getItemProps={getItemProps}
           url={`/_search?q=${searchKeyword}`}
         >
@@ -44,7 +44,7 @@ export const SearchMethodMenuItem = (props: Props): JSX.Element => {
 
       <SearchMenuItem
         index={shouldShowMenuItem ? 1 : 0}
-        highlightedIndex={highlightedIndex}
+        isActive={activeIndex === (shouldShowMenuItem ? 1 : 0)}
         getItemProps={getItemProps}
         url={`/_search?q=prefix:${currentPagePath} ${searchKeyword}`}
       >
@@ -59,7 +59,7 @@ export const SearchMethodMenuItem = (props: Props): JSX.Element => {
       { shouldShowMenuItem && (
         <SearchMenuItem
           index={2}
-          highlightedIndex={highlightedIndex}
+          isActive={activeIndex === 2}
           getItemProps={getItemProps}
           url={`/_search?q="${searchKeyword}"`}
         >

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

@@ -76,16 +76,16 @@ const SearchModal = (): JSX.Element => {
               </div>
 
               {/* see: https://github.com/downshift-js/downshift/issues/582#issuecomment-423592531 */}
-              <ul {...getMenuProps({ onMouseLeave: () => { setHighlightedIndex(-1) } })} className="list-unstyled">
+              <ul {...getMenuProps({ onMouseLeave: () => { setHighlightedIndex(-1) } })} className="list-group">
                 <div className="border-top mt-3 mb-3" />
                 <SearchMethodMenuItem
-                  highlightedIndex={highlightedIndex}
+                  activeIndex={highlightedIndex}
                   searchKeyword={searchKeyword}
                   getItemProps={getItemProps}
                 />
                 <div className="border-top mt-3 mb-3" />
                 <SearchResultMenuItem
-                  highlightedIndex={highlightedIndex}
+                  activeIndex={highlightedIndex}
                   searchKeyword={searchKeyword}
                   getItemProps={getItemProps}
                 />

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

@@ -10,12 +10,12 @@ import type { GetItemProps } from '../interfaces/downshift';
 import { SearchMenuItem } from './SearchMenuItem';
 
 type Props = {
+  activeIndex: number | null,
   searchKeyword: string,
-  highlightedIndex: number | null,
   getItemProps: GetItemProps,
 }
 export const SearchResultMenuItem = (props: Props): JSX.Element => {
-  const { searchKeyword, highlightedIndex, getItemProps } = props;
+  const { activeIndex, searchKeyword, getItemProps } = props;
 
   const debouncedKeyword = useDebounce(searchKeyword, 500);
 
@@ -49,7 +49,13 @@ export const SearchResultMenuItem = (props: Props): JSX.Element => {
     <>
       {searchResult?.data
         .map((item, index) => (
-          <SearchMenuItem key={item.data._id} index={getFiexdIndex(index)} highlightedIndex={highlightedIndex} getItemProps={getItemProps} url={item.data._id}>
+          <SearchMenuItem
+            key={item.data._id}
+            index={getFiexdIndex(index)}
+            isActive={getFiexdIndex(index) === activeIndex}
+            getItemProps={getItemProps}
+            url={item.data._id}
+          >
             <UserPicture user={item.data.creator} />
 
             <span className="ms-3 text-break text-wrap">