Bad interaction when qeditor with custom toolbar slots is inside a qfield

arogan commented 10 months ago

What happened?

If qeditor is inside a qfield then the custom toolbar slot drop triggers anytime you click in the text edit area of qeditor. This bug was introduced recently sometime in the last 3 months. If I remove qfield then qeditor behaves normally. We currently use qfield for some rules validation.

What did you expect to happen?

I expect the q btn dropdown not trigger when clicking in the text area but only when I actually click the toolbar.

Reproduction URL

https://codepen.io/aroganx/pen/poGrraw

How to reproduce?

Go to the provided codepen link
click anywhere in the text area
notice q btn dropdown triggers.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.22631) - win32/x64
NodeJs - 20.9.0

Global packages
  NPM - 10.2.3
  yarn - 1.22.19
  @quasar/cli - 2.3.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.14.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.12.0 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.8 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.8 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - Not installed
  vuex - 4.1.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.23.3 -- Babel compiler core.
  webpack - 5.89.0 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.11.1 -- 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.9.4 -- 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
  @quasar/quasar-app-extension-qcalendar - 4.0.0-beta.16 -- A Quasar App Extension for @quasar/quasar-ui-qcalendar
  @toby.mosque/quasar-app-extension-qdatetimepicker - 2.0.0-rc.3 -- Quasar Date Time Picker Extension
  @quasar/quasar-app-extension-qmarkdown - 2.0.0-beta.10 -- Display inline markdown in your Quasar App

Relevant log output

No response

Additional context

No response

arnKo commented 10 months ago

Same problem: #16589

arogan commented 10 months ago

Thanks for the link to your issue. I tried the hidden button fix with v-show = false and it worked for me too! So that is a workaround for now.

quasarframework / quasar