What is this?

With this minimal setup I try to reproduce an error in our project setup (using Quasar framework), where selecting an option from a QSelect nested within a QMenu closes the latter.

Background

While patching Quasar's QSelect component (as described in Quasar issue a11y: handle ARIA error state in form field components #17306 to solve some WCAG related things, I changed the way we import QSelect within a custom wrapper component.

This alone (without a patch actually being applied!) causes the behaviour described above. That might have similarities to an older issue QSelect multiple closes on every user action (selection/deselection) #12901 but I did ot verify.

TL;DR

In order to be able to patch a component via npx patch-package quasar, instead of doing a

import { QSelect, QIcon } from 'quasar'

in a custom component, wrapping QSelect, I directly import from src like so:

import { QIcon } from 'quasar'
import { QSelect } from '../../node_modules/quasar/src/components/select'

Setup

We use Quasar's Vite plugin flavour, so the setup steps for this testcase were as follows:

npm init vite quasar-vite-plugin-testcase -- --template vue
cd my-vue-app
npm install --save quasar @quasar/extras
npm install --save-dev @quasar/vite-plugin sass@^1.33.0

Then apply changes to main.js and vite.config.js and create src/quasar-variables.sass as described in Quasar's setup instructions

Run locally

The usual...

npm i
npm run dev

Result