How to fix width of Search box in react-select dropdown component?

Question

I am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.

Please see below image. How can i fix the search textbox width to react-select width?

Answer 1

Just set

autosize={false}

on the component.

Answer 2

I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works

  <Select

      value={this.state.passwordExpire}
      onChange={this.updatepasswordExpire.bind(this)}
      options={optionsDays}
      style={{width: '82%'}}  
 />

Answer 3

 const customStyles={
      // control represent the select component
        control: (provided)=>({
          ...provided,
          width:'100px'
       })
     }
    <Select
      options={options}
      styles={customStyles}
    ></Select>

This method is stated in react-select documentation. You can adjust select width as per your wish.