flat-fuchsia
flat-fuchsia15mo 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
kapa.ai15mo 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
kapa.ai15mo ago
<@592920475466727425> kapa.ai is still learning and improving, please let us how it did by reacting below
conventional-tan
conventional-tan15mo ago
what is your ui provider ? oh sorry. it's not releated to UI provider. i will try to create an example for you
flat-fuchsia
flat-fuchsia15mo ago
Thank you for your attention @alicanerdurmaz . I'm still trying to do it, I got it partially using useList and useState.
Omer
Omer15mo 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.
flat-fuchsia
flat-fuchsia15mo 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
Omer15mo 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.