copyToClipboard fallback mechanism does not work in dialog

[zegkljan]

What happened?

When copyToClipboard is called in an environment where navigator.clipboard is not available (e.g. over insecure connection) and a QDialog is up, the text is not copied.

What did you expect to happen?

The text should be copied, no matter whether a dialog is or is not active.

Reproduction URL

https://jsfiddle.net/rL4d9aux/3/

How to reproduce?

1. Go to the reproduction link.
2. Read the comment(s) in the copy function - since jsFiddle does not run in an insecure environment, navigator.clipboard is available, so the reporeted behaviour would not take place. For that reason I manually copied over the fallback branch of the code.
3. Click on 'COPY' button - the text outside dialog is in the clipboard.
4. Click on 'DIALOG' button - a dialog with a single 'COPY' button shows up.
5. Click on 'COPY FROM DIALOG' button in the dialog - the text inside dialog should be in the clipboard but is not.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SPA Mode

Platforms/Browsers

Firefox, Chrome

Quasar info output

Operating System - Linux(6.0.11-arch1-1) - linux/x64
NodeJs - 18.12.1

Global packages
  NPM - 8.19.2
  yarn - Not installed
  @quasar/cli - 1.3.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.10.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.1.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.6 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.45 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - 2.0.25 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.28.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-qoverlay - 2.0.1 -- A Quasar App Extension

Networking
  Host - vetrnik
  enp2s0 - 192.168.2.95
  br-78fcc9278498 - 172.22.0.1
  tailscale0 - 100.120.98.30

Relevant log output

No response

Additional context

My investigation shows that the cause is that the textarea (used by the fallback mechanism) cannot get focus (is not the document.activeElement after the focus() call). The selection inside it set up properly.

Suggestion for fix
When I switch the order of the focus() and select() calls, the copy now works even when a dialog is around. However, I'm not sure, if it does not break something else.

[rstoenescu]

QDialog has a Boolean prop called allowFocusOutside. It's disabled by default as an Accessibility feature so that the user can TAB through elements in the dialog without going through elements behind the dialog.

Please use <q-dialog allow-focus-outside until I figure out a way for copyToClipboard's procedure not to interfere with the feature above.

[rstoenescu]

To be more explicit: what copyToClipboard does is to create an element, append it to body, add the indicated content to it, then focus it so selection can occur, hence the problem with QDialog's default behavior

[rstoenescu]

Fix will be available in Quasar v2.11.5.
Thanks for reporting!