If an item is not highlighted, perform a normal search.

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

@@ -6,13 +6,16 @@ import { GetInputProps } from '../interfaces/downshift';
 
 type Props = {
   searchKeyword: string,
+  highlightedIndex: number | null,
   onChangeSearchText?: (text: string) => void,
   onClickClearButton?: () => void,
+  onEnterKeyDownHandler?: () => void,
   getInputProps: GetInputProps,
 }
+
 export const SearchForm = (props: Props): JSX.Element => {
   const {
-    searchKeyword, onChangeSearchText, onClickClearButton, getInputProps,
+    searchKeyword, highlightedIndex, onChangeSearchText, onClickClearButton, onEnterKeyDownHandler, getInputProps,
   } = props;
 
   const inputRef = useRef<HTMLInputElement>(null);
@@ -29,16 +32,24 @@ export const SearchForm = (props: Props): JSX.Element => {
     }
   }, [onClickClearButton]);
 
+  const enterKeyDownHandler = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
+    const shouldExecuteHandler = e.key === 'Enter' && !e.nativeEvent.isComposing && highlightedIndex == null && searchKeyword.trim().length !== 0;
+    if (shouldExecuteHandler) {
+      onEnterKeyDownHandler?.();
+    }
+  }, [highlightedIndex, onEnterKeyDownHandler, searchKeyword]);
+
   const inputOption = useMemo(() => {
-    return ({
+    return {
       type: 'text',
       placeholder: 'Search...',
       className: 'form-control',
       ref: inputRef,
       value: searchKeyword,
       onChange: changeSearchTextHandler,
-    });
-  }, [changeSearchTextHandler, searchKeyword]);
+      onKeyDown: enterKeyDownHandler,
+    };
+  }, [changeSearchTextHandler, enterKeyDownHandler, searchKeyword]);
 
   useEffect(() => {
     if (inputRef.current != null) {

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

@@ -30,10 +30,15 @@ const SearchModal = (): JSX.Element => {
   }, []);
 
   const selectSearchMenuItemHandler = useCallback((url: string) => {
-    closeSearchModal();
     router.push(url);
+    closeSearchModal();
   }, [closeSearchModal, router]);
 
+  const enterKeyDownHandler = useCallback(() => {
+    router.push(`/_search?q=${searchKeyword}`);
+    closeSearchModal();
+  }, [closeSearchModal, router, searchKeyword]);
+
   useEffect(() => {
     if (!searchModalData?.isOpened) {
       setSearchKeyword('');
@@ -54,9 +59,11 @@ const SearchModal = (): JSX.Element => {
           }) => (
             <div>
               <SearchForm
+                highlightedIndex={highlightedIndex}
                 searchKeyword={searchKeyword}
                 onChangeSearchText={changeSearchTextHandler}
                 onClickClearButton={clickClearButtonHandler}
+                onEnterKeyDownHandler={enterKeyDownHandler}
                 getInputProps={getInputProps}
               />