QField Issue: Incorrect use of <label for=FORM_ELEMENT>

[eliaspanagiotidis]

What happened?

Using QFields the following issue appears in devtools Issues panel:

It seems that the problem is inherited from v1 as the bug have been reported but closed because v1 LTS support had ended.

What did you expect to happen?

I would not expect any error to appear.

Reproduction URL

https://jsfiddle.net/2dkthq7L/

How to reproduce?

1. Open the documentation of the component (https://quasar.dev/vue-components/field/)
2. Press F12 to open the dev tools.
   We will see the above issues.
   The above reproduction URL was set only to overcome the restriction. Actually the devtools do not work as expected in jsfiddle or codepen.

Flavour

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

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @eliaspanagiotidis! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[pdanpdan]

This is normal. The examples do not have content in the QField. When you put some content give it the id.

[pdanpdan]

You can use a :for="null" to remove all traces of that
https://codepen.io/pdanpdan/pen/zYeoJgo?editors=1000

[eliaspanagiotidis]

Thank you @pdanpdan for the prompt reply. You are right, if the "control" slot contains a form field such like an input or button the issue does not appear. However, we use qField to create custom components not based on form fields. A workaround would be to insert a dummy input field in the slot as below:

<template>
  <q-field
    ref="slct"
    outlined
    stack-label
    :disable="store.unit === null"
    :label="$t('app.project')"
    class="cursor-pointer"
    :class="{ 'q-field--focused': focused }"
    :loading="loading"
    :for="null" // ***************** Important ******************
  >
    <template v-slot:control>
      <input name="$dummy" style="display:none"> // ***************** Important ******************
      <div tabindex="0" class="no-outline full-width">
        <project-item :project="store.curProject"/>
      </div>
    </template>
    <q-menu //  ***************** This menu does not open and close automatically as expected  ******************
      v-model="menuOpen"
      :persistent="filterVisible"
      fit
      oncontextmenu="return false"
      @before-show="onBeforeMenuShow"
      @before-hide="focused=false"
      class="column no-wrap non-selectable q-pa-sm no-scroll"
      style="height:530px;width:200px"
    >
      <q-card class="q-mb-sm">
        <q-expansion-item
          ref="fltr"
         ...

However, this solution, in addition to being a hack, creates problems with handling component focus, which needs more hacks to achieve.

I wonder if an option to replace the "label" parent tag of the qField with a "div" would be possible. This would make the component usable in cases that no form fields are involved in the implementation of the "control" slot.

Thanks

[eliaspanagiotidis]

Yes, I tried a :for="null" with no input file but I got the following issue:

I don't know why this issue does not appear in codepen.

[rstoenescu]

Fix will be available in Quasar v2.13.1
Also, new prop "tag" for QField in this version.