foreign-sapphire
foreign-sapphire13mo ago

Selected value is lost in Mantine Select if a search is done after selecting a value

When using the selectProps from the useSelect hook, and creating a Mantine Select component with those props, if a value is selected from the list of options but the user does a search after, the original value already selected is lost from the input and the list of options, is there a way to always have the selected value available?
5 Replies
kapa.ai
kapa.ai13mo ago
Hi @rafaelsorto. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai13mo ago
---------------------- Yes, you can ensure that the selected value is always available in the options by using the defaultValue property of the useSelect hook. When you provide a defaultValue, a separate useMany query is sent to the backend with the defaultValue, and the result is appended to the options of the <Select> component. This ensures that the default values exist in the current options array. Here's an example of how to use the defaultValue property:
useSelect({
defaultValue: 1, // or [1, 2]
});
useSelect({
defaultValue: 1, // or [1, 2]
});
Refer to the useMany documentation for detailed usage. → (https://refine.dev/docs/api-reference/core/hooks/data/useMany/) In your case, you can set the defaultValue to the selected value to ensure it's always included in the options. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
useMany | refine
useMany is an extended version of TanStack Query's useQuery. It supports all the features of useQuery and adds some extra features.
kapa.ai
kapa.ai13mo ago
<@675886119006634036> kapa.ai is still learning and improving, please let us how it did by reacting below
continuing-cyan
continuing-cyan13mo ago
Hello @rafaelsorto could you provide us a reproducible example of the issue? It’s hard to tell from the message.
foreign-sapphire
foreign-sapphire12mo ago
hey @batuhanw thanks for the reploy, I actually solved this by using the defaultValue prop and I am updating that parameter via a local state that detects the currenctly selected value so its always used as a "default value" and it solves the issue of a missing item in the select input