Cannot display q-date within q-popup-proxy attached to a q-input in some specific conditions

[CamilleDrapier]

What happened?

While using Firefox, have a q-input (or q-btn), attatch a q-popup-proxy (it seems the problem would happen with a simpler q-menu as well) to that q-input. Inside the q-popup-proxy insert a row within that row put a q-date. When clicking on the rendered input, nothing is displayed.

What did you expect to happen?

The menu should show with the date selector inside it.

That said, maybe this code was improper from the beginning, and this kind of layout shouldn't be used; please let me know if that is the case (though, it is a bit strange that it works in Chrome but not Firefox)

Reproduction URL

https://codepen.io/camilledrapier-the-flexboxer/pen/bGQMpYE

How to reproduce?

1. Increase the weight/width of the rendering space enough for the date-picker to be displayed inline (not in a dialog)
2. Click on the input
3. Expect the menu with the date picker to display

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Firefox

Quasar info output

Operating System - Linux(6.1.38-1-MANJARO) - linux/x64
NodeJs - 18.16.0

Global packages
  NPM - 9.6.6
  yarn - 1.22.19
  @quasar/cli - 2.2.1
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.12.2 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.9.2 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.5 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.4 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.4
  pinia - 2.1.4 -- 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.22.8 -- Babel compiler core.
  webpack - 5.76.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.11.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 6.6.0 -- 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 - 5.1.6 -- 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-testing - 2.1.0 -- A Quasar App Extension for managing Test Harnesses
  @quasar/quasar-app-extension-testing-unit-jest - 3.0.0-beta.5 -- A Quasar App Extension for running Jest tests
  @quasar/quasar-app-extension-testing-e2e-cypress - 5.1.0 -- A Quasar App Extension for Cypress e2e

Relevant log output

No errors

Additional context

This seems to work with either of the following:

• using Chrome
• removing the intermediate row in the code
• adding inline class to the intermediate row in the code
• adding a sibling <div style="height: 1px; width: 1px; margin-right: -1px;"></div>, before the row div
• when the proxy determines that a dialog should be used
• use a version of Quasar strictly below 2.12.1

This might relate to the following: https://github.com/quasarframework/quasar/issues/13749 ; https://github.com/quasarframework/quasar/issues/15890 - and subsequently to https://github.com/quasarframework/quasar/issues/11247

[air-dex]

I have encountered the bug too, but with Quasar 2.12.3 and the Vite flavour instead. The inline workaround worked in my case.

[nullr00tbyte]

@quasar/app-vite 1.8.0 (@quasar/cli 2.4.0)

Node v21.6.1

    <q-input filled v-model="FechaIngreso" label="Fecha de oficio" hint="2024-04-11 00:00" class="col-4">
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy cover>
            <div class="row">
              <q-date v-model="FechaIngreso" mask="YYYY-MM-DD HH:mm" />
              <q-time v-model="FechaIngreso" mask="YYYY-MM-DD HH:mm" />
            </div>
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>

Not work in firefox but is working in Chrome