如何在react-select下拉组件中修复搜索框的宽度？

Question

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

请参见下图。 如何将搜索文本框宽度修改为反应选择宽度？

Answer 1

只需设置

autosize={false}

在组件上。

Answer 2

您可以尝试使用此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 3

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

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

这是解决方案..

Answer 4

我有类似的问题。我检查了浏览器，发现如果将宽度设置为82％，我的问题将得到解决。所以我在“选择”标签中添加了它，并且有效

  <Select

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

Answer 5

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

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

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

在这种情况下，这是正确的解决方案。一切正常。