useSelect filter not working

Hello, I'm trying to filter the return of useSelect by using its filters prop. However, the output is not being filtered at all. ```javascript const [skillLevel, setSkillLevel] = React.useState(0); const { options } = useSelect<Spell>({ resource: "spells", optionLabel: "name", optionValue: "id", filters: [ { field: "level", operator: "eq", value: skillLevel } ] }); <Controller name="spellLevel" control={control} defaultValue={0} render={({ field }) => ( <FormControl> <InputLabel>Spell Level</InputLabel> <Select {...field} style={{ height: '50px', minWidth: '200px' }} onChange={(e) => { field.onChange(e); setSkillLevel(e.target.value); }} > {spellLevels.map((level) => ( <MenuItem key={level} value={level}> {level} </MenuItem> ))} </Select> </FormControl> )} /> <Controller name="spell" control={control} defaultValue="" render={({ field }) => ( <FormControl> <InputLabel>Spell</InputLabel> <Select {...field} style={{ height: '50px', minWidth: '200px' }}> {options .map((option) => ( <MenuItem key={option.value} value={option.value}> {option.label} </MenuItem> ))} </Select>
kapa.ai
kapa.ai181d ago
Hi @quandrix_. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The filters prop in the useSelect hook is used to filter the options you are showing. The filters will be passed to the getList method from the dataProvider as a parameter via the useList hook and used to send filter query parameters to the API. Here is an example of how to use the filters prop in useSelect:
useSelect({
filters: [
{
field: "isActive",
operator: "eq",
value: true,
},
],
});
useSelect({
filters: [
{
field: "isActive",
operator: "eq",
value: true,
},
],
});
(Source: Refine Documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/)) In your case, you are using the filters prop correctly. However, please note that dynamically changing the filters property will trigger a new request. This means that when you update the skillLevel state, it should trigger a new request with the updated filter. If the output is not being filtered as expected, it could be due to the following reasons: 1. The dataProvider might not be handling the filter parameters correctly. Please ensure that your dataProvider is set up to handle filter parameters correctly. 2. The field in the filter might not match the actual field name in your data. Please ensure that the field name in the filter matches the actual field name in your data. 3. The operator in the filter might not be supported by your dataProvider. Please ensure that your dataProvider supports the eq operator for filtering. If you are still facing issues, please refer to the Refine Documentation (https://refine.dev/docs/api-reference/antd/hooks/field/useSelect/) or the CrudFilters interface documentation (https://refine.dev/docs/api-reference/core/interfaceReferences/#crudfilters) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai181d ago
<@223544018016010240> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black
xenial-black181d ago
First realized I got my UIs mixed up. Changed useSelect to useList, but I ended up just removing the filter from the API call and instead just had the UI do the filtering. Less API calls overall that way. ```javascript <Select {...field} style={{ height: '50px', minWidth: '200px' }}> {spells .filter((spell) => spell.level === skillLevel) .map((spell) => ( <MenuItem key={spell.id} value={spell.id}> {spell.name} </MenuItem> ))} </Select>
equal-jade
equal-jade179d ago
Hello @quandrix_ was the answer sufficient for you? Best
xenial-black
xenial-black179d ago
Yup!
More Posts
useNavigation```http://localhost:5173/inquiry/create/inquiry-type-create``` ```const { replace} = useNavigation()community healthFor anyone else struggling with getting an input component to save a number using Antd, you have to Select defaultValue does not work on create pageHow do you set a defaultvalue for select component on create page?Can I do nested lists in Refine.For example, I have a list of users and each user has a list of chats. There should be a user pages nextjs v14does refine supports nextjs v 14?useSelect```const { selectProps } = useSelect({ resource: `master-data/${props.urlApi}`, optionLabel:Refine OAuth doesn't work to send user to "admin" page after loginI tried OAuth (with Discord) and when the user signs in, they aren't sent to the "admin" page.Access Control Casbin for nulled menu item (Parents)I have this: import { newModel, StringAdapter } from "casbin"; export const model = newModel(` [rUse FontAwesome simutaneously with AntDesignI want to use FontAwesome icon for sider menu, I'm using import type { RefineThemedLayoutV2SiderPropadd custom Sider menuItem in a separate fileI've a customSider where I have successfully insert my own menu item in. useEffect(() => { consMaximum call stack size exceeded Circular Reference Error, nested custom menu@kapa.ai Uncaught RangeError: Maximum call stack size exceeded. const { SubMenu } = Menu; const { usCircular Reference Error, nested custom menu Sider ThemedLayoutV2Sider and CanAccessThis is my sider.Add new menu item without affect the current menu itemI have this in my app.js <Refine dataProvider={dataProvider(supabaseClient)} rouRefine Example app-crm: open Modal without changing pageI'm using this as a reference: https://github.com/refinedev/refine/tree/master/examples/app-crm In tMonitor route change and active elementIs there anything/code I can insert into my App.js so that whenever the route change, it console logHi, I'm using refine + mantine + remix,Hi, I'm using refine + mantine + remix, and the mantine version is 5.10.4, however current release i