Item selections needs two clicks on iOS

[sebastijandumancic]

Hi,

I'm curious about the iOS behaviour of multiselect. If user clicks on iPhone on item in dropdown it only highlights the item, and only on second click the item is actually selected. Is that intended? On Android phones it highlights and selects in only one click.

Thanks.

[shentao]

The mobile experience needs some improvements. I will look into it, thanks! :)

[sirchas]

Is there a workaround to fix this? I was thinking of clicking when selecting? Thank you if someone has had any ideas. Love this control!!

[keybrdist]

Im experiencing the same problem in the regular browser on a selectbox thats in a small table column

[azamat-sharapov]

@shentao is the fix you pushed only for v2? If so, can we expect it to be on v1 too? Thanks.

[shentao]

@azamat-sharapov yeah, it was only pushed to v2. However, I’m not sure it actually fixed the problem. When I tested it, it sadly wasn’t deterministic, so there might have been some race conditions or something :/ If it works for you on v2, feel free to create a PR to v1. I will try to merge that and release it soon afterwards.

[alvaxet]

@shentao I'm still experiencing this issue on IOS, I'm using version 2.0.2

[jayjun]

I’ll be happy to debug this, but I can’t reproduce it using my iPhone nor iOS simulators on the official website (presumably >= 2.0.8).

If you’re facing this issue, please state your iOS version because I’d love to get to the bottom of this.

[saulyz]

@shentao @jayjun Still having this issue on IOS devices (Android devices work fine) with vue-multiselect@2.1.0. IOS users must do doubleclick to open select box. I use Xcode simulator with IOS 11.4 (iPhone X, iPhone 7 plus) which replicate real devices connected with Safari Develop tools.

By default, I'm using touch directive to report interaction. Single tap does nothing, console prints the component element: [Log]<div tabindex="0" class="multiselect link multiselect--above">…</div> After double tap, console prints: [Log] touchHandler - <div tabindex="0" class="multiselect link multiselect--above">…</div> [Log] touchHandler - <div tabindex="0" class="multiselect link multiselect--active multiselect--above">…</div> [Log] multiselectOpenHandler - open

Following a hint from 525 I'm again using directive to handle touch tap and making focus on vue-multiselect component node. Visually - component is seems to be triggered from a single tap, but just does not open.

In the browser console I can see, that touch handler function performs focus (this.$refs.multiselect.$el.focus()). And component emits immediate "open" and "close" events which is the only real problem why this "focus" solution does not work on IOS.

[Log] touchHandler just before performing focus via $ref element [Log] multiselectOpenHandler - open [Log] multiselectCloseHandler - close

[saulyz]

I've found that these issues have appeared because of fastClick usage. After removing fastClick, vue-multiselect@2.1.0 works as it should - no need for double click: IOS and Android devices. Thanks for version improvements!

[jayjun]

@saulyz Cool, always worth testing with the library’s homepage to see if the reference implementation works.

[analuisamartins]

Hi. Just faced this issue, it has to do with the pseudo elements in multiselect__option—xxxxx. In my case / specific design I don’t need these styles and rewriting/removing these rules from the css it works as expected in mobile with one click.

Css Rules causing the issue: .multiselectoption--highlight:after .multiselectoption--selected:after .multiselectoption--selected.multiselectoption--highlight:after

Problem explained here: https://css-tricks.com/annoying-mobile-double-tap-link-issue/

[spotman]

I'm facing the same issue too and removing CSS rules fixed it. Thanks, @analuisamartins !

@shentao may I suggest to remove pseudo elements and replace them via regular tags? Doing this way webkit on iOS will work as intended.

[shentao]

That’s a great idea @spotman! Thank you.

[lhf168]

hi,author,Item selections needs two clicks on iOS,can you help me solve this problem? emergency！！！

[programm1st]

whats up, im using vue-multiselect v 2.1.6

how said @analuisamartins im remove css classes .multiselectoption--highlight:after .multiselectoption--selected:after .multiselectoption--selected.multiselectoption--highlight:after

for example: .multiselect__option--highlight:after{ all: unset; } on chrom emulator all work fine, but when i install app on iphone, multiselect doesnt work. Im remove fastclick, how said @saulyz but this still doesnt work.

can anyone say what im doing incorrectly? fnx

[spotman]

@AstashevNikita you need to completely remove these styles from CSS, without overwriting. I've done that by creating a copy of vue-multiselect CSS and commenting these rules. It's an ugly way but nothing else worked.

[programm1st]

And now i have another problem. I should use fastclick to delete delay, but for vue-multiselect i have to delete fastclick. With fastclick i have to use double click... do any one know way how to use fastclick and vue-multiselect?

[programm1st]

@spotman, i coppy css file and commenting this 3 rules, but i still need double click=(

[davidanquetin]

I had this problem when using Multiselect with fastclick in vue, simply removed Fastclick and it works !

[Yelles]

And now i have another problem. I should use fastclick to delete delay, but for vue-multiselect i have to delete fastclick. With fastclick i have to use double click... do any one know way how to use fastclick and vue-multiselect?

did you find a way to do that?

[Zh4rsiest]

I'm facing the same issue too and removing CSS rules fixed it. Thanks, @analuisamartins !

@shentao may I suggest to remove pseudo elements and replace them via regular tags? Doing this way webkit on iOS will work as intended.

I was researching for a different issue not related to this package and removing :hover rules or only using them above mobile resolution fixes the double click issue :)

[DunnJM]

I'm facing this issue currently, is it the easiest way to rectify to manually override the css?

[DunnJM]

@analuisamartins @spotman sorry to tag you in this, but I've been unable to override the necessary rules to get this to work. When you say you created a local copy of the css and then removed the rules, how were able to ensure the component was using your local css as opposed to the css in the package? Thanks

[analuisamartins]

@DunnJM if I remember right I’ve just removed the call of the css of the package and added the copy on my app’s theme without the rules mentioned. You must have sure that your css file is loaded after the package css if you want to keep both or if it is feasible on your code put another class on the elements or a wrapper id on body for example, in this way your rules stay above the ones on the component.

Example:

(…) .my-element .multiselect__option--highlight:after{ all: unset; }

(…)

my-app .multiselect__option--highlight:after{

all: unset; }

[DunnJM]

@analuisamartins ah, you're including it via the cdn I assume. I'm using it via npm so curious to know how I would go about overriding the css in this case?

[DunnJM]

Fixed for me by updating from Vue 2.5.x to Vue 2.6.x