AntD | Input.Search - Input disabled but keep the search button enabled

Question

I use Input.Search. The disabled prop makes both the input & the button disabled. Here I want to keep the button enabled while the input is disabled.

Is there solution?

<Search
  enterButton
  placeholder="ID"
  // disabled
  onSearch={() => console.log('search')}
/>

Answer 1

Use enterButton prop & provide a custom button component.

const { Search } = Input;

const customButton = <Button type="primary" icon={<SearchOutlined />} />;

const onSearch = (value) => console.log(value);

const App = () => (
  <Space direction="vertical">
    <Search
      placeholder="input search text"
      enterButton={customButton}
      disabled
      size="large"
      onSearch={onSearch}
    />
  </Space>
);

In the example, input is disabled but you can click the custom search button & see the console logs.