Dependent selects
I need to build a form that has 2 selects (city and property). When I select the city, I need the second select to render only the property options for that city. How can I do this with refine? Grateful
7 Replies
Hey @Rodrigo Cândido! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
----------------------
You can use the
useSelect
hook in refine to create a dependent select form. The useSelect
hook allows you to fetch data from a resource and use it to populate a select component. You can use the onSelect
prop to define a callback function that will be triggered when a selection is made. This callback function can be used to update the data in the second select component.
Here is an example of how to use the useSelect
hook to create a dependent select form:
For more information on how to use the useSelect
hook, please refer to the refine documentation (https://refine.dev/docs/ui-frameworks/antd/hooks/field/useSelect/).
----------------------<@592920475466727425> kapa.ai is still learning and improving, please let us how it did by reacting below
correct-apricot•2y ago
what is your ui provider ?
oh sorry. it's not releated to UI provider. i will try to create an example for you
foreign-sapphire•2y ago
Thank you for your attention @alicanerdurmaz . I'm still trying to do it, I got it partially using useList and useState.
Hey @Rodrigo Cândido ;
You can use useSelect filters ⚡️
https://refine.dev/docs/api-reference/core/hooks/useSelect/#filters
useSelect | refine
useSelect hook allows you to manage any select (like a Html `` tag, React Select, etc...) component. Since it is designed as headless, It expects you to handle the UI.
foreign-sapphire•2y ago
Thanks @Omer , I tried it too. Now I'm not able to filter inside the query.
I have the following example:
Resource: Sector
{
_id,
name,
propertyLocation: {
_id,
name
}
}
In my select, I need to present the sectors that have propertyLocation.name = selectedProperty. Inside the hook, I tried something like:
filters: [
{
field: "propertyLocation.name",
operator: "eq",
value: selectedProperty
}
But the filter didn't work the way I wanted. I think my problem is exactly there... Would this be the correct way to filter nested fields?
The issue of the filter not working is entirely related to your data provider. Please provide more context for us to be able to assist you. It would be great if you could share a CodeSandbox or StackBlitz environment where we can see the code you've written. You can also try to create a fork from our examples.