search

skratchdot / react-bootstrap-multiselect

A multiselect component for react (with bootstrap). This is a react port of bootstrap-multiselect.
http://projects.skratchdot.com/react-bootstrap-multiselect/
Other
119 stars 62 forks source link

Add onChange property causes select box to be disabled, i.e. cannot click to show list. #85

Open mnewlin opened 6 years ago

mnewlin commented 6 years ago

My Multiselect seems to work fine until I would like to add handler then it stops working.

This works: <Multiselect data={groupList} multiple />

This does not work: <Multiselect onChange={this.handleChange} data={groupList} multiple />

Any ideas??

mnewlin commented 6 years ago

I had a reference to bootstrap 4, once I changed all references to bootstrap 3, it started working. Strange that it only had an issue when I added the event handler.

skratchdot commented 6 years ago

That is odd. I'm not 100% sure what's going on. Was there an error being thrown in the console? If so, was it in the handleChange function, or in the react-bootstrap-multiselect code somewhere?

mnewlin commented 6 years ago

No console error. As long as I left off onChange property from the element it displayed fine. I tried to inspect the styles to see what was happening but couldn't find anything in the time that I spent looking. Once I downgraded to bootstrap 3.3.7 it started working again.

JSiscar commented 3 years ago

It creates 2 ul elements when is added (an empty one and the one you actually created):

<ul class="multiselect-container dropdown-menu show" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;"></ul>

<ul class="multiselect-container dropdown-menu"><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Motogp"> Motogp</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="F1"> F1</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Football"> Football</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Surf"> Surf</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Hockey"> Hockey</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Rugby"> Rugby</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Covid-19"> Covid-19</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="National"> National</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Politics"> Politics</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="Fashion"> Fashion</label></a></li></ul>

This doesn't happen when the onChange event is removed. This is the code I have for the multiselect <Multiselect className="col-md-12" data={multiselectData} id="formSignupMultiselect" onChange={() => this.handleSelect()} multiple />

Does anybody know why this is happening? Thanks.