wise-white•2y 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•2y 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•2y 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•2y ago

<@675886119006634036> kapa.ai is still learning and improving, please let us how it did by reacting below

extended-salmon•2y ago

Hello @rafaelsorto could you provide us a reproducible example of the issue? It’s hard to tell from the message.

wise-white•16mo 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