Focusout (focusout.js) doesn't always work for canvas elements. Works ok with Quasar v1.x

cmcleese commented 2 years ago

What happened?

Focusout doesn't always work for canvas elements. Quasar v2x

Something different happening with src/utils/private/focusout.js specifically with Chrome/Chromium. The focusin trigger event fires differently depending on which browser (chromium, FF) . This is when for example a menu or dropdown is to closed on click away.

ex: https://codesandbox.io/s/test-quasar-cesium-vue3-edjxls You can see the document.activeElement via console.log output is different between browsers when trying to click away. I can't see what the difference would be other than the way focusout.js works.

This works however in quasar v1x : https://codesandbox.io/s/test-quasar-cesium-vue2-1nwu95

In chromium, focusin trigger() is called once clicking away from open dropdown. In firefox, it is not. Which allows the dropdown to close on click away as expected. The document.activeElement confirms this. In chromium, it still think the click away is happening on the same element and thus focusin fires the event again.

What did you expect to happen?

Focusout should trigger correctly when clicking away on anyway canvas element with the same behavior across all browsers.

Reproduction URL

Quasar v2x: https://codesandbox.io/s/test-quasar-cesium-vue3-edjxls?file=/src/index.template.html
Quasar v1x: https://codesandbox.io/s/test-quasar-cesium-vue2-1nwu95

How to reproduce?

got to codensandbox link provided
open a dropdown
try to dismiss by clicking elsewhere
observe the console log output is different for document.activeElement in Chrome & Firefox
observe how the focusout doesn't occur always on the map canvas element. Especially in Chrome

Flavour

Quasar CLI (@quasar/cli | @quasar/app)

Areas

Components (quasar), Composables (quasar)

Platforms/Browsers

Firefox, Chrome, Microsoft Edge

Quasar info output

Operating System - Windows_NT(10.0.19044) - win32/x64
NodeJs - 14.18.2

Global packages
  NPM - 6.14.15
  yarn - 1.22.17
  @quasar/cli - 1.2.2
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.5.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app - 3.3.2 -- Quasar Framework local CLI
  @quasar/extras - 1.12.4 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.29 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.12
  vuex - 4.0.1 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.14.6 -- Babel compiler core.
  webpack - 5.58.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.7.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.5.5 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

No response

pdanpdan commented 2 years ago

The cesium code stops/prevents the mousedown and touchstart events (with capture at document level) So clickOutside cannot receive neither the two events not a focus event on the canvas because by preventing the events cesium code also prevents the canvas getting focus

cmcleese commented 2 years ago

I created a codesandbox using quasar v1x with the exact same code and cesium version. With quasar v1x click events are handle correctly and dropdowns can close.

https://codesandbox.io/s/test-quasar-cesium-vue2-1nwu95
If for some reason the codesandbox doesn't start, just open a new terminal yarn start, and refresh the mini browser.

This leads me to believe that perhaps along the way something changed in focus.js handlers between quasar versions. I will update my original post to include the test link for v1x quasar.

quasarframework / quasar