quickest-silver•2y ago

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

kapa.ai•2y ago

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:

import { useContext } from "react";  
import { Select, useSelect } from "@pankod/refine-antd";  
  
import { StoreContext } from "context/store";  
import { IStore } from "interfaces";  
  
type SelectProps = {  
 onSelect: () => void;  
};  
  
export const StoreSelect: React.FC<SelectProps> = ({ onSelect }) => {  
 const [store, setStore] = useContext(StoreContext);  
  
 const { selectProps: storeSelectProps } = useSelect<IStore>({  
 resource: "stores",  
 optionLabel: "title",  
 optionValue: "id",  
 });  
  
 const handleChange = (selectedValue: string) => {  
 setStore(selectedValue);  
 };  
  
 return (  
 <Select  
 defaultValue={store}  
 style={ width: 130 }  
 onChange={handleChange}  
 onSelect={onSelect}  
 >  
 {storeSelectProps.options?.map(({ value, label }) => (  
 <Select.Option key={value} value={value}>  
 {label}  
 </Select.Option>  
 ))}  
 </Select>  
 );  
};

import { useContext } from "react";  
import { Select, useSelect } from "@pankod/refine-antd";  
  
import { StoreContext } from "context/store";  
import { IStore } from "interfaces";  
  
type SelectProps = {  
 onSelect: () => void;  
};  
  
export const StoreSelect: React.FC<SelectProps> = ({ onSelect }) => {  
 const [store, setStore] = useContext(StoreContext);  
  
 const { selectProps: storeSelectProps } = useSelect<IStore>({  
 resource: "stores",  
 optionLabel: "title",  
 optionValue: "id",  
 });  
  
 const handleChange = (selectedValue: string) => {  
 setStore(selectedValue);  
 };  
  
 return (  
 <Select  
 defaultValue={store}  
 style={ width: 130 }  
 onChange={handleChange}  
 onSelect={onSelect}  
 >  
 {storeSelectProps.options?.map(({ value, label }) => (  
 <Select.Option key={value} value={value}>  
 {label}  
 </Select.Option>  
 ))}  
 </Select>  
 );  
};

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/). ----------------------

kapa.ai•2y ago

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

optimistic-gold•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

quickest-silver•17mo ago

Thank you for your attention @alicanerdurmaz . I'm still trying to do it, I got it partially using useList and useState.

Omer•17mo ago

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.

quickest-silver•17mo 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?

Omer•17mo ago

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.