Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to disable input on react-select?

How to disable input on react-select? Is that possible? I just want it to be a dropdown.

<Select
    placeholder="Action"
    className="col-3 mt-3"
    value={orderStatusInput}
    onChange={this.onOrderStatusChange}
    options={orderStatusOptions}
/>

enter image description here

like image 496
phongyewtong Avatar asked Sep 18 '20 02:09

phongyewtong


People also ask

How do I turn off the input field in React?

To disable a button when an input is empty with React, we can set the input's value as a state's value. Then we can use the state to conditionally disable the button when the state's value is empty.

How do you clear the input in React-select?

We can programmatically clear a React-Select dropdown by resetting the value that is set as the value of the value prop to null . Then the dropdown will be cleared. We have the options array with the value and label properties. value has the selection's value.


2 Answers

To make React Select act as a dropdown

export default function App() {
  return (
    <div>
      <ReactSelect isSearchable={false} />
    </div>
  );
}
like image 159
Alex Mckay Avatar answered Oct 20 '22 02:10

Alex Mckay


If you want the search input to be disabled and just want it to be a dropdown, you can set the isSearchable property to false:

<Select
  placeholder="Action"
  className="col-3 mt-3"
  value={orderStatusInput}
  onChange={this.onOrderStatusChange}
  options={orderStatusOptions}
  isSearchable={false}
/>
like image 36
ultimoTG Avatar answered Oct 20 '22 00:10

ultimoTG