quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.51k stars 3.45k forks source link

.q-electron-drag class on q-bar prevents selecting menu item when overlapping #17285

Open bgtor opened 2 weeks ago

bgtor commented 2 weeks ago

What happened?

When using q-bar with .q-electron-drag class as a substitution for electron app bar, any menu items that overlap the q-bar cannot be selected, mouse interaction being captured by q-bar instead of menu item.

What did you expect to happen?

Expected that drag event will be applied only to q-bar and menu items can be selected without problem.

Reproduction URL

https://github.com/bgtor/quasar-test-error

How to reproduce?

  1. Clone the repository.
  2. Install dependencies with yarn install
  3. Run electron app with yarn run electron
  4. Click on Input and try selecting the first item.

Flavour

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

Areas

Components (quasar), Electron Mode

Platforms/Browsers

Electron

Quasar info output

Operating System - Darwin(22.6.0) - darwin/x64
NodeJs - 20.12.2

Global packages
  NPM - 10.5.0
  yarn - 1.22.22
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.16.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.9.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.29 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.3.3
  pinia - Not installed
  vuex - Not installed
  vite - 2.9.18 -- Native-ESM powered web dev build tool
  eslint - 8.57.0 -- An AST-based pattern checker for JavaScript.
  electron - 31.0.1 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - 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
  *None installed*

Relevant log output

No response

Additional context

Video reproduction of the bug:

Screen Recording 2024-06-15 at 14 52 40-2

Dimonka2 commented 1 week ago

I had the same issue as well: https://github.com/quasarframework/quasar/discussions/16986

Solution could be that menus should automatically include 'q-electron-drag--exception' or they need to be aware, what is the upper limit of the screen (not overflow the custom header).