Commit 9ed23802 authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: submit on select suggestion

parent 19a89698
import { useRouter } from 'next/router'
import type { FormEvent, ReactNode } from 'react'
import type { FormEvent, Key, ReactNode } from 'react'
import { useEffect, useMemo, useState } from 'react'
import { useAutocompleteItems, useGetItemCategories } from '@/api/sshoc'
......@@ -83,11 +83,13 @@ export function ItemCategorySelect(): JSX.Element {
export interface ItemSearchComboBoxProps {
variant?: 'invisible'
shouldSubmitOnSelect?: boolean
}
export function ItemSearchComboBox(
props: ItemSearchComboBoxProps,
): JSX.Element {
const router = useRouter()
const defaultSearchTerm = useQueryParam('q', false)
const [searchTerm, setSearchTerm] = useState(defaultSearchTerm ?? '')
......@@ -100,6 +102,7 @@ export function ItemSearchComboBox(
if (searchTerm.length === 0 && defaultSearchTerm !== undefined) {
setSearchTerm(defaultSearchTerm)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [defaultSearchTerm])
const debouncedSearchTerm = useDebouncedState(searchTerm, 150).trim()
......@@ -114,6 +117,16 @@ export function ItemSearchComboBox(
const suggestions =
items.data?.suggestions?.map((suggestion) => ({ suggestion })) ?? []
function onSelectionChange(key: Key | null) {
if (
props.shouldSubmitOnSelect === true &&
key != null &&
String(key).length > 0
) {
router.push({ pathname: '/search', query: { q: key } })
}
}
return (
<ComboBox
name="q"
......@@ -123,6 +136,7 @@ export function ItemSearchComboBox(
isLoading={items.isLoading}
inputValue={searchTerm}
onInputChange={setSearchTerm}
onSelectionChange={onSelectionChange}
variant="search"
type="search"
hideSelectionIcon
......
......@@ -31,7 +31,7 @@ export default function Header({
) : null}
<VStack className="relative p-6 space-y-6">
<ItemSearchForm className="flex items-center self-end w-full max-w-screen-md px-2 py-1 my-4 space-x-2 bg-white border border-gray-200 rounded">
<ItemSearchComboBox variant="invisible" />
<ItemSearchComboBox shouldSubmitOnSelect variant="invisible" />
<SubmitButton className="h-10" />
</ItemSearchForm>
{children}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment