Checkbox in a QItem with tag="label" doesn't work when using itemProps from QSelect

[Klikini]

What happened?

I have a QItem with tag="label" containing a QCheckbox. You can click anywhere on the item to check the box, as expected.

If I use the same QItem in the option template of a QSelect, it still works.

However, if I bind the itemProps template parameter to the QItem for the accessibility/etc. features, the checkbox no longer works.

What did you expect to happen?

A QItem with the QSelect option template itemProps bound should still allow clicking anywhere on the item to toggle the checkbox.

Reproduction URL

https://codepen.io/klikini/pen/JoYrvbK

How to reproduce?

1. Go to the reproduction URL.
2. Click on the first dropdown and check/uncheck the items by clicking on the checkboxes or anywhere else on the item.
3. Click on the second dropdown and attempt to check/uncheck the items by clicking on the item label, but not the checkbox. It doesn't work (but clicking on the checkbox still does).

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

Firefox, Safari

Quasar info output

Operating System - Darwin(24.6.0) - darwin/arm64
NodeJs - 18.20.8

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

Important local packages
  quasar - 2.18.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.15.1 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.17 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - Not installed
  vuex - 4.1.0 -- state management for Vue.js
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.26.10 -- Babel compiler core.
  webpack - 5.99.6 -- 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
  *None installed*

Networking
  Host - cosmic.localdomain
  en0 - 192.168.3.70
  en7 - 192.168.2.120
  utun8 - 10.100.0.14

Relevant log output

No log output

Additional context

No response

[rstoenescu]

Hi,

You need to add a @click.prevent on the QItem otherwise two events (one @click from itemProps and the native label click) will be triggered which will cancel each other's effect.

<q-item v-ripple v-bind="itemProps" tag="label" @click.prevent>

[Klikini]

That works, thank you :)