How to set antd input.search set readonly upon onSearch

Question

I'm trying disable, or even better, make the content of my input.search component non-editable, after a user clicks search. However, using the disabled property to achieve this, also disables the "search" button, and I only need to disable the input field itself. Is there any way to achieve this easily?

<Input.Search
enterButton={inProgress ? 'Cancel' : 'Search'}
onSearch={text => this.go(text)}
allowClear={inProgress ? false : true}
disabled={inProgress ? false : true}
/>

blueseal · Accepted Answer · 2020-02-09T14:03:05.633

I found this is an easy way to make input field readOnly

const MyInput = () => {
  const [readOnly, setReadOnly] = useState(false);
  return (
    <div>
      <Search
        placeholder="input search text"
        enterButton="Search"
        size="large"
        readOnly={readOnly}
        onSearch={value => {
          console.log(value);
          setReadOnly(!readOnly);
        }}
      />
    </div>
  );
};

checkout the Demo

How to set antd input.search set readonly upon onSearch

1 Answers1