search

snapappointments / bootstrap-select

:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
https://developer.snapappointments.com/bootstrap-select/
MIT License
9.85k stars 2.72k forks source link

First touch in mobile IOS devices results in a hover event and the its back to normal. #1265

Closed Sudaraka007 closed 3 years ago

Sudaraka007 commented 8 years ago

The Drop down appears with touching the button, and when you first click on the dropdown it results in a mouse hover event. then the functionality is normal until the drop down is opened again. this only happens in ios devices and i checked in ipad iphone and ipod. Thank you in advance

alexmipego commented 8 years ago

I'm also having this issue on iPhones and also using the Chrome Developer Tools mobile emulator. After 2 days I've finally found the reason and a workaround, I leave the details here in the hope that it helps people and maybe inspire a permanent fix.

So, while searching about the annoying "iOS Safari double tap issue" there is a lot of information and workarounds related to the touch events but these didn't help with my particular case. The reason is that I already had included the FastClick javascripts that tries to fix and/or normalize these issues. However, it's interaction with bootstrap-select isn't working correctly because it decides to cancel the first click, the code that does this is at https://github.com/ftlabs/fastclick/blob/master/lib/fastclick.js#L227

Based on that code, and without much more research, I've found that adding a "needsclick" class to the target of the first click solves this issue. The (crude) code is:

// Init select picker var mySelect = $('#test'); mySelect.selectpicker(); // Fix double tap issue $(mySelect[0].nextElementSibling).find('.filter-option').addClass('needsclick');