Edition with QEditor is not possible when maximized if is inside a QDialog

[lugrinder]

What happened?

When a QEditor is used inside a QDialog, if the editor is maximized using the editor maximize toolbar button, edition is not possible.

What did you expect to happen?

Edit text.

Reproduction URL

https://codepen.io/lukskaygualker/pen/YzajYNm

How to reproduce?

1.Go to the provided link. 2.Click on EDITOR button. 3.Once opened, click on maximize toolbar button. 4.Edition is not possible.

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome

Quasar info output

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

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

Important local packages
  quasar - 2.7.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.5.9 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.1 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.31 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.0.14 -- > This is the repository for Vue Router 4 (for Vue 3)
  pinia - 2.0.13 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.14.6 -- Babel compiler core.
  webpack - 5.74.0 -- 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.9.3 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 6.5.3 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  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
  quasar-app-extension-ide-helper - 1.0.0 -- Quasar framework extension which enables IDE features like autocomplete by generating helper files for IDE to index.

Relevant log output

No response

Additional context

No response

[lugrinder]

Sorry, mislabeled. Is for Quasar v2 not v1.

[rstoenescu]

Hi,

When displaying in fullscreen we need to reposition the QEditor in DOM (for multiple reasons to allow it work flawlessly on all Platforms, including iOS). It ends up outside of the initial Dialog, so just add allow-outside-focus Boolean prop (Quasar v2.7.2+) to your QDialog:

<q-dialog v-model="show" allow-focus-outside>

[rstoenescu]

Alternatively, just maximize the Dialog itself.

[lugrinder]

Hi,

When displaying in fullscreen we need to reposition the QEditor in DOM (for multiple reasons to allow it work flawlessly on all Platforms, including iOS). It ends up outside of the initial Dialog, so just add allow-outside-focus Boolean prop (Quasar v2.7.2+) to your QDialog:

<q-dialog v-model="show" allow-focus-outside>

Thanks, works fine...

[lugrinder]

Alternatively, just maximize the Dialog itself.

That was I've done, but in my case I've preferred the allow-focus-outside solution.