javascript - 单击未触发的下拉复选框/单选按钮项

Question

我正在使用 react-bootstrap-multiselect。

我检查了版本，但所有版本的库都是相同的。我只是从他们的文档中复制粘贴代码。这是这里 - https://github.com/skratchdot/react-bootstrap-multiselect

这只发生在某些机器上。我无法在我的机器上重现此问题。 :( 真的很奇怪。

以下是它无法运行的机器的详细信息: whatismybrowser.com/w/JJHX6T8

我的机器。同样，对我来说它正在工作!: whatismybrowser.com/w/9GMNNNN

<Multiselect
  id={this.props.id}
  maxHeight={200}
  onDropdownHide={this.onFilterClose}
  onChange={this.handleChange}
  data={componentData}
  multiple={this.props.multiselect}
  buttonText={function (options, select) { return text; }} />

永远不会调用 handleChange 函数。因为单击永远不会发生在单选/复选框按钮上(仅在某些机器上。)

更新: 此问题仅出现在带有触摸屏的设备上。 (触摸屏笔记本电脑、智能手机、平板电脑)

Answer 1

我的天哪!检查库版本兼容性，检查js文件，检查os版本，检查浏览器版本，原来是CSS!!

.dropdown-menu-filter{
  background:#525050;
  padding: 30%;
  border-radius: 0;
  outline: none;
  z-index: 1;
  min-width: 146px !important;
  overflow-y: scroll;
  height: 117px !important;
  margin-top: 10px;
}

z-index 是罪魁祸首。删除它后，一切正常。我猜 z-index 在触摸屏设备上发挥了一些作用。

希望这对某人有帮助! :(