Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SSHOC
sshoc-marketplace-frontend
Commits
9ed23802
Commit
9ed23802
authored
Mar 09, 2021
by
Stefan Probst
Browse files
fix: submit on select suggestion
parent
19a89698
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/modules/search/ItemSearchForm.tsx
View file @
9ed23802
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
...
...
src/modules/ui/Header.tsx
View file @
9ed23802
...
...
@@ -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
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment