QField does not emit native events

[steersbob]

Describe the bug QField does not emit its own click event. In vue 2 this could be resolved by using @click.native. In vue 3, the native modifier is deprecated in favor of automated attribute fallthrough. Attribute fallthrough is blocked by the inheritAttrs: false setting on QField. This leaves us with no elegant approach to setting a click handler on q-field elements.

Technically, the workaround below works, but it's rather hacky.

const fieldRef = ref<QField>();
onMounted(() => { fieldRef.value.$el.onclick = () => emit('click'); });

Codepen/jsFiddle/Codesandbox (required) https://codepen.io/steersbob/pen/QWdVxNE?editors=101

To Reproduce Steps to reproduce the behavior:

1. Click on the field

Expected behavior The notification to be shown.

Screenshots If applicable, add screenshots to help explain your problem.

Platform (please complete the following information): Quasar Version: 2.0.0-beta.12 @quasar/app Version: 3.0.0-beta.13 Quasar mode:

• [x] SPA
• [x] SSR
• [x] PWA
• [x] Electron
• [x] Cordova
• [x] Capacitor
• [x] BEX

Tested on:

• [x] SPA
• [ ] SSR
• [ ] PWA
• [ ] Electron
• [ ] Cordova
• [ ] Capacitor
• [ ] BEX

OS: Ubuntu 20.04 Node: 14 NPM: 6.14 Yarn: N/A Browsers: any iOS: N/A Android: N/A Electron: N/A

Additional context I'm not entirely sure whether this should be classified as bug or feature report. @click.native being a suggested workaround in vue 2 suggests that it's a defect, as it was previously possible.

[kevingermain]

It's a trouble for me as well to not have the click event...

[NicoP-S]

Is there any workaround for this problem? I need it too

[sullyD64]

I am facing the same problem, even though the workaround works for me too. Are there any plans on supporting this?

[vandelpavel]

I'm facing the same Issue. In my case, I need to open a dialog and I've tried to use the "focus" event. That was not useful for me since every time I close the dialog the element gets back the focus and reopens the dialog.

I've also tried to change the quasar QField inside the codebase and building the project but it keeps returning me errors but I'll leave you with a possible (not tested) solution: https://github.com/quasarframework/quasar/commit/c391ebfc04d9a01a5de3f5e5cc84ec238f9c4f38

[leo-buneev]

Here's workaround - create component MyField with following content:

// MyField.vue
<template>
  <QField ref="qField" v-bind="$attrs">
    <template v-for="(_, slot) of $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </QField>
</template>

<script setup lang="ts">
import { QField } from 'quasar'
const emit = defineEmits(['click'])
const qField = ref<QField>()
onMounted(() => {
  // https://github.com/quasarframework/quasar/issues/8956
  qField.value!.$el.onclick = () => emit('click')
})
</script>

And then use <MyField @click="..."> instead of <QField>