Vue-multiselect: iOS: dropdown does not close on blur

[wujekbogdan]

Normally the drop-down closes when Multiselect loses focus (in fact, not really loses focus, basically when we click outside the Multiselect element). On iOS it remains open.

Is it a bug, or is it intentional? I would expect Multiselect to behave consistently across browsers/devices.

[TrendyTim]

Its a bug, ios doesnt seem to support div onblur

looks like it needs a variant of

function hideOnClickOutside(element) {
    const outsideClickListener = event => {
        if (!element.contains(event.target)) { // or use: event.target.closest(selector) === null
            if (isVisible(element)) {
                element.style.display = 'none'
                removeClickListener()
            }
        }
    }

    const removeClickListener = () => {
        document.removeEventListener('click', outsideClickListener)
    }

    document.addEventListener('click', outsideClickListener)
}

const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ) // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js 

(Taken from https://stackoverflow.com/a/3028037/4164604)

Edit:

Although that kind of experience is a little awkward on a phone anyway. Displaying the dropdown as a full screen modal would probably work better for non mouse interaction (on smaller screens anyway).

[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.

[TrendyTim]

@shentao Are there any plans to address this issue ? It really hampers the functionality on mobile.

[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.

[Michelemassari]

Any news on how to fix this? It's kind of game-breaking on iOS

[shentao]

Although that kind of experience is a little awkward on a phone anyway. Displaying the dropdown as a full screen modal would probably work better for non mouse interaction (on smaller screens anyway).

I think this would be the best approach. Will see if I can implement this in v3. However, I don’t think this is easily done in v2.

PRs are welcome.

[Michelemassari]

I agree it's the best approach. I was wondering if there is a quick fix I can implement on currently live sites in the meantime?

Could you please help?

[shentao]

Rather hard, since the current behaviour relies on the focus. v3 implements a "click-away" functionality so it should be working there. I guess we might have to wait for v3 to be released.

[spotman]

:+1: for fixing this annoying issue. Is it possible to add close() method to API so we can create a temporary workaround for iOS? Right now it is not possible to close vue-multiselect programmatically or to emulate blur event.

[KylinWu]

Hey @spotman

I found a method from here.

this.$refs.multiselect.deactivate()

[spotman]

Thanks, @KylinWu ! I was really missing it.

[adunk]

@KylinWu or @spotman Can you share a little more about how you used this.$refs.multiselect.deactivate() to get around this problem?