Vue-multiselect: Not working focus on iOS

[Jekins]

Not working focus on iOS if mode searchable is true. After click on multiselect, input not set focused.

[chocochaii]

As I researched, you have to click 2 times to get focus state on iOS. The first click is on span so the options will open but the keyboard doesn't. If we want to open the keyboard, we have to click it again. This second time we actually click on input so the keyboard will open.

[Jekins]

But if I need to open the keyboard with the first click, what should I do? Because that's how all the selections work and this is how this plugin works on android

[darinkolev]

here is a workaround:

multiselect(@open="onSelect")

and on select show and focus programmatically the input:

onSelect () { const input = $(this.$vnode.elm).find('input') if (input.css('display') === 'none') { input.show() input.trigger('focus') } },

you have to adjust the selector of the input

[Jekins]

Thx, it is work:
Set ref="multiselect" and @open="onOpen" on select, and writing this method:

onOpen () {
      const multiselect = this.$refs.multiselect
      const input = multiselect.$refs.search

      if (input.style.display === 'none') {
        input.style.display = 'block'
        input.focus()
      }
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hoektoe]

@Jekins where you able to activate the cursor when focusing the input. Mine opens the dropdown but does not act the same as a click. Thus on iphone the keyboard is not activated for the user to be able to start typing.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[syther101]

This still seems to be an issue in Safari on iOS 12. I've captured the below video detailing the issue. Note how the first click does not open the keyboard, and a second click on the input element is required to do so.

Looking at links around the web this seems to be an issue with simulating focus on the input element. Safari seems to not respond to simulated clicks like other browsers.

iOS does not show keyboard on .focus()

Mobile Safari: Javascript focus() method on inputfield only works with click?

I've managed to fix this in a project by removing the div.multiselect__placeholder element and simply moving the input.multiselect__input element to the front of the component. Doing this means Safari will correctly receive focus as the touch event happens on the input element itself.

@shentao I'n not sure if the div.multiselect__placeholder element has other purposes. If it could be removed and replaced with the above fix I could submit a pull request 🙂

Also I haven't contributed to many project. Let me know if you'd like me to submit a new issue or anything :)

[shentao]

Thanks @syther101 for the investigation. What about not removing the placeholder, but instead moving the z-index of the input so that it is on-top of the placeholder?

[shentao]

Thanks @syther101 for the investigation. What about not removing the placeholder, but instead moving the z-index of the input so that it is on-top of the placeholder?

[syther101]

Agreed @shentao. I've given it a try and it seems to work nicely. I don't use the default multiselect css in this project so will try and work creating a PR in the coming week :)

[shentao]

Thanks a lot!