Cannot focus on and type in QInput inside QList with tag="label"
-
Good day.
I use tag=“label” property on QList (to encapsulate QRadio in list items, if this information is essential). I placed a few QInput components inside QItems in the list. However, I cannot focus on QInput fields when I have tag=“label” property. It occurs this way:
when I just click on the input field the @input even occurs immediately, the label (float-label) jumps up for a moment and then returns to its initial position and the input field loses focus. And I cannot type anything in the input field (I can only do it if I click on the field and keep my mouse key pressed down).I’ve been using the same construction in the previous Quasar version and it worked just great.
I’m not sure whether it’s a bug or my lack of understanding how click event propagation works.Thank you.
-
Could you create a replication of the issue in a codepen?
Scott
-
https://codepen.io/Solarwake/pen/VwZywgb
I used the same model for all inputs in this sample. It worked the same with different models on each input or with just one input displayed only with the active QRadio-QItem coupling. The same behavior with QSelect used with autocomplete input.Also, I found that inputs placed inside q-radio do not show that queer behavior. However, I’ve been using the template I posted in codepen because it seemed more convenient as I was rendering a small form with a few inputs inside the selected QItem.
-
Ok. I see your issue. I think it’s because of the usage of QList. Can you work out your design without using QList?
Scott
-
What I actually did now is placed my QInputs inside <q-item-section><q-item-label><q-radio>…</q-radio></q-item-label></q-item-section> rather than creating a sibling <q-item-section><q-item-label>…with the form fields inside.This way QList with tag=“label” does’t seem to cause any trouble. If that does not contradict any of Quasar’s principles for now I’d go on with that option.
-
If it works, it’s good! Great you could work it out.
Scott
