Click on the dropdown checkbox/radio buttons items in not triggered

Question

I am using react-bootstrap-multiselect.

I checked with versions, but all versions of the libraries are same. I simply copy pasted the code from their documentation. Which is here - https://github.com/skratchdot/react-bootstrap-multiselect

This is happening only on some machines. I am not able to reproduce this issue on my machine. :( Really weird.

Here's the details of the machine on which it is not working: whatismybrowser.com/w/JJHX6T8

My machine. Again, for me it is working!: 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; }} />

The handleChange function is never called. Because the click never happens on the radio/checkbox buttons (Only on some machines.)

Update: This issue is only on devices with touch screen. (Touch screen laptops, smartphones, tablets)

Answer 1

OMG! After checking for library version compatibility, checking js files, checking os version, checking browser version, it turns out to be the 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;
}

The z-index was the culprit. After removing it, everything worked perfectly. I guess z-index plays some role on touchscreen devices.

Hope this helps someone! :(