Click on QField triggers click on nested QBtn

[arnKo]

What happened?

When using a QBtn in a slot of a QField, the QBtn's click handler is triggered when clicking anywhere on the QField. Additionally, the QBtn is highlighted as hovered when hovering the QField.

I think the click and the highlighting comes from the focus helper: https://github.com/quasarframework/quasar/blob/dev/ui/src/composables/private/use-field.js#L275 It searches for an element with a tabindex attribute and calls it's focus method. It finds the first button, focuses it and with this forwards the click event to it.

What did you expect to happen?

The QBtn's click handler should only be triggered when the QBtn is clicked directly. A click on the QField should only focus the inner content and not trigger the QBtn.

Reproduction URL

https://jsfiddle.net/xg9tprL1/9/

How to reproduce?

1. Go to the provided reproduction link
2. Click anywhere on the QField except on the QBtn directly
3. See that the counter increases although the QBtn was not clicked

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Microsoft Edge

Quasar info output

Operating System - Linux(5.15.0-88-generic) - linux/x64
NodeJs - 16.20.2

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

Important local packages
  quasar - 2.13.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.6.2 -- Quasar Framework App CLI with Vite
  @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 - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.53.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - host
  br-6d31cd3b2533 - 172.23.0.1
  br-b44fa4fa93fa - 172.24.0.1
  br-3e634fdd1237 - 172.27.0.1

Relevant log output

No response

Additional context

No response

[thevladisss]

I've had the same issue, and unfortunately I did not find the right solution for it yet, as even getting rid of all events listeners did not cause expected effect, and container elements was still causing button click, which is very strange behaviour I believe. The workaround I did was to use "before" and "after" slots and just position them absolutely within the QField. This way no propagation was caused, though this solution is a little bit clunky

[arnKo]

My workaround is a dummy button with v-show="false" as first element in the slot. It receives the click and doesn't trigger anything else.

[cbluth95]

This is a workaround I have found to work. Use the @mousedown.prevent event instead of a click event. <q-field outline label="Click here to see that it triggers the button"> <template #prepend> <q-btn @mousedown.prevent="counter++">Do not click here</q-btn> </template> </q-field> include mobile <q-field outline label="Click here to see that it triggers the button"> <template #prepend> <q-btn @mousedown.prevent="counter++" @touchstart.prevent="counter++">Do not click here</q-btn> </template> </q-field>

[ahmedjas1m]

Hey there, there is a new property for QField as Tag, accepts two values (label or div) the default value is label if you want to use QField as a wrapper (no form control field) then set the property to div . hopefully that may solve your problem.

FYI