Trigger click event within q-field will trigger 2 event

haaah commented 7 months ago

What happened?

Clicking on the qitem triggers a second click event which belong to another component.

What did you expect to happen?

Clicking on the qitem should only trigger 1 event.

Reproduction URL

https://codepen.io/haaah/pen/bGzzXJz

How to reproduce?

Click on the q-btn will trigger alert("B")
Click on q-item trigger both function alert("A") and alert("B")

Flavour

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

Areas

Components (quasar), SPA Mode

Platforms/Browsers

Firefox, Chrome

Quasar info output

Operating System - Darwin(20.6.0) - darwin/x64
NodeJs - 16.14.0

Global packages
  NPM - 8.3.1
  yarn - 1.22.10
  @quasar/cli - 2.3.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.14.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.12.1 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.11 -- 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
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.20.12 -- Babel compiler core.
  webpack - 5.75.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.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*

Relevant log output

No response

Additional context

No response

haaah commented 7 months ago

it seems that the bug is introduced after upgrade to quasar 2.14.0.

cbluth95 commented 6 months ago

Use slots https://codepen.io/Cody-B/pen/OJdYwpe

in my example, you can remove the slot after the button which is a send icon. This will produce the result you are looking for.

haaah commented 6 months ago

Hi @cbluth95 The example you provide will still trigger both click event.

My expectation is

clicking at q-item should trigger only 1 click event instead of 2.

That's why i'm reporting this as bug.

I believe my issue is similar to #16589

pdanpdan commented 6 months ago

Use @click.prevent="onClickA"

dsl101 commented 4 months ago

@pdanpdan How do you accomplish this when using a QOptionGroup inside a QField? Do you agree this is actually a bug (cf: #16883 and #16589)? If so, I don't think it should be closed...

I've made a simple example here, with the workaround from those other bugs: https://codepen.io/dsl101/pen/vYPqLPR?editors=1011

darkopetreski commented 4 months ago

I am trying to implement resumable.js with QField component. resumable.js inserts input file element. I have no way to put @click.prevent there, since the input is managed by the third party library. And on click the the input is fired twice, once from the "normal" event listener, and once from the QField component.

A workaround would be to add a hidden button at the top of the slot:

<template #control>
    <q-btn v-show="false"></q-btn>
    The rest of the content here.
</template>

quasarframework / quasar