From c4f5511915ad5c60c380d9ee8b2c0531bf2b6969 Mon Sep 17 00:00:00 2001
From: Anderson Shindy Oki <anderson.vs.oki@gmail.com>
Date: Tue, 11 Jun 2024 19:23:18 +0900
Subject: Added submission on select to search box

---
 frontend/src/components/Search.module.scss |  9 --------
 frontend/src/components/Search.tsx         | 37 ++++++------------------------
 2 files changed, 7 insertions(+), 39 deletions(-)
 delete mode 100644 frontend/src/components/Search.module.scss

diff --git a/frontend/src/components/Search.module.scss b/frontend/src/components/Search.module.scss
deleted file mode 100644
index 2c42098eb..000000000
--- a/frontend/src/components/Search.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.result {
-  @include light {
-    color: var(--mantine-color-dark-8);
-  }
-
-  @include dark {
-    color: var(--mantine-color-gray-1);
-  }
-}
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
index 60749d7ff..b506afee3 100644
--- a/frontend/src/components/Search.tsx
+++ b/frontend/src/components/Search.tsx
@@ -1,16 +1,10 @@
 import { FunctionComponent, useMemo, useState } from "react";
-import { Link } from "react-router-dom";
-import {
-  Anchor,
-  Autocomplete,
-  ComboboxItem,
-  OptionsFilter,
-} from "@mantine/core";
+import { useNavigate } from "react-router-dom";
+import { Autocomplete, ComboboxItem, OptionsFilter, Text } from "@mantine/core";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useServerSearch } from "@/apis/hooks";
 import { useDebouncedValue } from "@/utilities";
-import styles from "./Search.module.scss";
 
 type SearchResultItem = {
   value: string;
@@ -57,21 +51,8 @@ const optionsFilter: OptionsFilter = ({ options, search }) => {
   });
 };
 
-const ResultComponent = ({ name, link }: { name: string; link: string }) => {
-  return (
-    <Anchor
-      component={Link}
-      to={link}
-      underline="never"
-      className={styles.result}
-      p="sm"
-    >
-      {name}
-    </Anchor>
-  );
-};
-
 const Search: FunctionComponent = () => {
+  const navigate = useNavigate();
   const [query, setQuery] = useState("");
 
   const results = useSearch(query);
@@ -79,14 +60,7 @@ const Search: FunctionComponent = () => {
   return (
     <Autocomplete
       leftSection={<FontAwesomeIcon icon={faSearch} />}
-      renderOption={(input) => (
-        <ResultComponent
-          name={input.option.value}
-          link={
-            results.find((a) => a.value === input.option.value)?.link || "/"
-          }
-        />
-      )}
+      renderOption={(input) => <Text p="xs">{input.option.value}</Text>}
       placeholder="Search"
       size="sm"
       data={results}
@@ -96,6 +70,9 @@ const Search: FunctionComponent = () => {
       onChange={setQuery}
       onBlur={() => setQuery("")}
       filter={optionsFilter}
+      onOptionSubmit={(option) =>
+        navigate(results.find((a) => a.value === option)?.link || "/")
+      }
     ></Autocomplete>
   );
 };
-- 
cgit v1.2.3