#Setting search input value when user is tab-ing over options

3 messages · Page 1 of 1 (latest)

steep path
#

Hello everyone! Is there a way to set input value when user is navigating through options with his keyboard? Would be helpful in any components like autocomplete, select etc.
usecase: Search input like in youtube/twitch etc. Right now I have two submit options and they conflict with each other. One onKeyDown event when user just types in input and submits and the other one onOptionSubmit.

Attaching video of youtube search input

willow swallow
# steep path Hello everyone! Is there a way to set input value when user is navigating throug...

you'll likely want to build a custom search for this

when you're doing custom inputs mantine provides Combobox. it lets you implement any input and select functionality you like, and have more control over what happens
https://mantine.dev/core/combobox/
https://mantine.dev/combobox/?e=SearchableSelect

as for something very basic, here's a little example. you'd need to build in fetching logic (e.g. react query etc.) and how options get handled on your side, but something like this, with different states should work:
https://codesandbox.io/p/sandbox/brave-burnell-vllz73

Create custom select, autocomplete or multiselect inputs

50+ examples of using Mantine Combobox component

steep path