Vuetify: [Bug Report] Dialog returns focus to itself

[Pazza]

Versions and Environment

Vuetify: 1.5.8
Last working version: 1.5.7
Vue: 2.6.10
Browsers: Chrome 73.0.3683.86
OS: Mac OS 10.14.3

Steps to reproduce

Try calling document.execCommand from a click event within a dialog. This method requires user interaction. Although the event is firing, its almost as though execCommand is not getting the event

Expected Behavior

Copy to clipboard just as if it is being called outside of a dialog.

Actual Behavior

Not copying to clipboard.

Reproduction Link

https://codesandbox.io/s/kk24rxzz5v

[KaelWD]

v-dialog has a global event listener so tab focus doesn't wrap around to the background elements (#2538). You can circumvent this by stopping the event on your element: el.addEventListener('focusin', e => e.stopPropagation())

[Pazza]

That did it, thank you.

[midoribi]

Thx too. But I'might thnk its BUG
Why do the v-bottom-sheet attributes [persistent] and [hide-overlay] exist?

[timdiacon]

I'm having the same problem but I've been using the v-clipboard library to copy strings to the clipboard when I need to construct them in a method. I tried to stop the propagation of the button event that didn't work highlighting I clearly don't understand the above fix :-)

onButtonPress(e){ e.stopPropagation() var s = 'someString' this.$clipboard(s) },

[Pazza]

@timdiacon, The stopPropagation needs to be called within the function doing the copy to clipboard logic. The way it works is it creates a temporary textarea element, sets its value to the string it needs to copy, and calls the copy on that element. The stopPropagation needs to be applied to that temporary element's 'focusin' event.

It's fairly trivial to copy to clipboard and you would do fine by not using a third party library.

function copyToClipboard (str) {
    const el = document.createElement('textarea')
    el.addEventListener('focusin', e => e.stopPropagation())
    el.value = str
    document.body.appendChild(el)
    el.select()
    document.execCommand('copy')
    document.body.removeChild(el)
}

Hope that helps.

[mayank-shaan]

@timdiacon, The stopPropagation needs to be called within the function doing the copy to clipboard logic. The way it works is it creates a temporary textarea element, sets its value to the string it needs to copy, and calls the copy on that element. The stopPropagation needs to be applied to that temporary element's 'focusin' event.

It's fairly trivial to copy to clipboard and you would do fine by not using a third party library.

function copyToClipboard (str) {
    const el = document.createElement('textarea')
    el.addEventListener('focusin', e => e.stopPropagation())
    el.value = str
    document.body.appendChild(el)
    el.select()
    document.execCommand('copy')
    document.body.removeChild(el)
}

Hope that helps.

Thanks Bro,

[KaelWD]

This needs a configuration option to work with external libraries. It's easy to add a listener for one element but not if using smoething like tinyMCE: #7608

[SelimSalihovic]

@KaelWD first of all, thank you for all the contributions to this awesome tool. Do you know whether this issue will be fixed soon?

[KaelWD]

For reference: This feature was removed from 1.5, but kept in 2.0. A new prop retain-focus (enabled by default) was added in 2.0.0 so it can be disabled in cases where other behaviour is broken.