disable select dropdown search from rerunning table query

K

kapa.ai•9/13/24, 7:28 AM

Hi @amvdxc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•9/13/24, 7:29 AM

----------------------
To disable the select dropdown search from rerunning the associated table query, you can handle client-side filtering for the select dropdown. This way, the search input will not trigger a server-side query.

Here is how you can achieve this using the

useSelect

useSelect

useSelect

useSelect hook from refine with Mantine or Ant Design:

Mantine Example

You can disable server-side filtering by passing the

onSearch

onSearch

onSearch

onSearch function as

undefined

undefined

and managing the search input state on the client-side:

import { useSelect } from "@refinedev/mantine";  
import { Select } from "@mantine/core";  
import { useState } from "react";

const ProductCreate: React.FC = () => {  
  const { selectProps } = useSelect({  
    resource: "categories",  
  });  
  
  const [searchValue, setSearchValue] = useState("");  
  
  return (  
    <Select  
      {...selectProps}  
      onSearch={undefined}  
      onSearchChange={setSearchValue}  
      searchValue={searchValue}  
    />  
  );  
};

import { useSelect } from "@refinedev/mantine";  
import { Select } from "@mantine/core";  
import { useState } from "react";

const ProductCreate: React.FC = () => {  
  const { selectProps } = useSelect({  
    resource: "categories",  
  });  
  
  const [searchValue, setSearchValue] = useState("");  
  
  return (  
    <Select  
      {...selectProps}  
      onSearch={undefined}  
      onSearchChange={setSearchValue}  
      searchValue={searchValue}  
    />  
  );  
};

import { useSelect } from "@refinedev/mantine";  
import { Select } from "@mantine/core";  
import { useState } from "react";

const ProductCreate: React.FC = () => {  
  const { selectProps } = useSelect({  
    resource: "categories",  
  });  
  
  const [searchValue, setSearchValue] = useState("");  
  
  return (  
    <Select  
      {...selectProps}  
      onSearch={undefined}  
      onSearchChange={setSearchValue}  
      searchValue={searchValue}  
    />  
  );  
};

import { useSelect } from "@refinedev/mantine";  
import { Select } from "@mantine/core";  
import { useState } from "react";

const ProductCreate: React.FC = () => {  
  const { selectProps } = useSelect({  
    resource: "categories",  
  });  
  
  const [searchValue, setSearchValue] = useState("");  
  
  return (  
    <Select  
      {...selectProps}  
      onSearch={undefined}  
      onSearchChange={setSearchValue}  
      searchValue={searchValue}  
    />  
  );  
};

Ant Design Example

Similarly, for Ant Design, you can manage the search input state on the client-side:

import { useSelect } from "@refinedev/antd";  
import { Select } from "antd";  
import { useState } from "react";

const ProductCreate: React.FC = () => {  
  const { selectProps } = useSelect({  
    resource: "categories",  
  });  
  
  const [searchValue, setSearchValue] = useState("");  
  
  return (  
    <Select  
      {...selectProps}  
      showSearch  
      onSearch={undefined}  
      onSearchChange={setSearchValue}  
      searchValue={searchValue}  
    />  
  );  
};

import { useSelect } from "@refinedev/antd";  
import { Select } from "antd";  
import { useState } from "react";

const ProductCreate: React.FC = () => {  
  const { selectProps } = useSelect({  
    resource: "categories",  
  });  
  
  const [searchValue, setSearchValue] = useState("");  
  
  return (  
    <Select  
      {...selectProps}  
      showSearch  
      onSearch={undefined}  
      onSearchChange={setSearchValue}  
      searchValue={searchValue}  
    />  
  );  
};

import { useSelect } from "@refinedev/antd";  
import { Select } from "antd";  
import { useState } from "react";

const ProductCreate: React.FC = () => {  
  const { selectProps } = useSelect({  
    resource: "categories",  
  });  
  
  const [searchValue, setSearchValue] = useState("");  
  
  return (  
    <Select  
      {...selectProps}  
      showSearch  
      onSearch={undefined}  
      onSearchChange={setSearchValue}  
      searchValue={searchValue}  
    />  
  );  
};

import { useSelect } from "@refinedev/antd";  
import { Select } from "antd";  
import { useState } from "react";

const ProductCreate: React.FC = () => {  
  const { selectProps } = useSelect({  
    resource: "categories",  
  });  
  
  const [searchValue, setSearchValue] = useState("");  
  
  return (  
    <Select  
      {...selectProps}  
      showSearch  
      onSearch={undefined}  
      onSearchChange={setSearchValue}  
      searchValue={searchValue}  
    />  
  );  
};

By setting

onSearch

onSearch

onSearch

onSearch to

undefined

undefined

and managing the

searchValue

searchValue

searchValue

searchValue and

onSearchChange

onSearchChange

onSearchChange

onSearchChange properties, you ensure that the search input does not trigger a server-side query, thus keeping the select dropdown search from rerunning the associated table query.

K

kapa.ai•9/13/24, 7:29 AM

For more information, you can refer to the Mantine
useSelect
useSelect
useSelect
useSelect documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-select/#onsearch) and the Ant Design
useSelect
useSelect
useSelect
useSelect documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-select/#debounce).
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•9/13/24, 7:29 AM

@705425032960016475 kapa.ai is still learning and improving, please let us know how it did by reacting below