search

angular-ui / ui-select

AngularJS-native version of Select2 and Selectize
MIT License
3.26k stars 1.81k forks source link

Behaviour of select on mobile and touch devices #1322

Open grahamlittle opened 8 years ago

grahamlittle commented 8 years ago

Background

I have moved to ui-select from Select2 but i have noticed that undesirable behaviour is happening in ui-select that does not happen in Select2. I am using AngularJS 1.3.20 and angular-ui-utils 3.0.0, angular-ui-date 0.0.8 and angular-ui-select 0.12.1.

Issue

When swiping up / down / left / right over ui-select the select button does not open and i am able to capture touchend,touchmove, swipeleft, swiperight, swipedown, swipeup events as expected. However, when i start my swipe / touch action on the ui-select firstly I get no events (click,touchstart,etc) and secondly the ui-select is opened even though it is not a click event but a swipe or touch event.

Even if we state that ui-select should open for such events, with the events not being propagated outside of the ui-select component i am unable to override the behaviour and tell the ui-select not to open when the action is a touchstart / touchmove / swipeup / swipedown / swipeleft.

Would you be able to confirm if this is expected behaviour and secondly perhaps provide any suggestions for me to get around this?

many thanks

grahamlittle commented 8 years ago

I have done some investigation and it seems like this is intended behaviour even though it pretty much makes the ui-select elements un-usable on mobile devices. I can see that all events except touchend fail to be propagated outside of the ui-select also making it difficult to do something else with that behaviour. If anyone has any suggestions i would really appreciate the help.

wesleycho commented 8 years ago

Swiping on the ui select component shouldn't do anything - if it is open, then it should just scroll through the dropdown if there are too many entries.

Event normalization is a difficult problem though. Better off using a library like hammer.js or fastclick IMO for this.