disable select dropdown search from rerunning table query

@kapa.ai How can I keep the select dropdown search from rerunning the associated table query?

2 Replies

Hi @amvdxc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 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 hook from refine with Mantine or Ant Design: Mantine Example You can disable server-side filtering by passing the onSearch function as 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}  
    />  
  );  
};

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}  
    />  
  );  
};

By setting onSearch to undefined and managing the searchValue and 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. For more information, you can refer to the Mantine useSelect documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-select/#onsearch) and the Ant Design 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 :speech_balloon: ----------------------

kapa.ai•3w ago

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