summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAnderson Shindy Oki <[email protected]>2024-06-11 19:23:18 +0900
committerGitHub <[email protected]>2024-06-11 06:23:18 -0400
commitc4f5511915ad5c60c380d9ee8b2c0531bf2b6969 (patch)
tree1c0397944a0daf9969bb053349b08a4d9175a779
parentff8fd8c9a43efea33a77d2e13b90a674672166ab (diff)
downloadbazarr-c4f5511915ad5c60c380d9ee8b2c0531bf2b6969.tar.gz
bazarr-c4f5511915ad5c60c380d9ee8b2c0531bf2b6969.zip
Added submission on select to search box
-rw-r--r--frontend/src/components/Search.module.scss9
-rw-r--r--frontend/src/components/Search.tsx37
2 files changed, 7 insertions, 39 deletions
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>
);
};