reactjs - 如何修复反应选择下拉组件中搜索框的宽度？

Question

我在我的反应应用程序中使用反应选择下拉组件。我发现了一个奇怪的问题，当用户开始在 react-select 下拉列表中输入搜索项目时，搜索文本框会被拉伸，并且它不是通过下拉列表固定的。

请看下图。如何修复搜索文本框宽度以响应选择宽度？

Answer 1

刚设置

autosize={false}

在组件上。

Answer 2

我有类似的问题。我检查了浏览器，发现如果我将宽度设置为 82%，我的问题就解决了。所以我在“选择”标签中添加了它，它可以工作

  <Select

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

Answer 3

你可以试试这个css。

.Select-input {  
  position: absolute !important; 
  width: calc(~'100% - 0px');
}

.Select-value-label {
  display: none !important;
}

.Select-value {
  position: relative !important;
}

.Select-menu-outer {
  width: auto;
  min-width: 100%;
  text-align: left;
}

.Select-option {
  white-space: nowrap;
}

.Select-control {
  min-width: 100%;
  width: auto;
  text-align: left;
}

Answer 4

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

这个方法在 react-select 文档中有说明。您可以根据需要调整选择宽度。

Answer 5

.Select-control {
    table-layout: fixed;
}

.Select-input {
    overflow: hidden;
    max-width: 100%;
}

这是解决方案..

Answer 6

.Select-input > input {
    width: 100% !important;
}

.Select--multi .Select-input {
    display: block !important;
}

.Select--multi .Select-multi-value-wrapper {
    display: block !important;
}

在这种情况下，这是正确的解决方案。它工作正常。