QInput in QRadio loses focus after release a mouse button

[Innoel]

I have this code in template:

     <q-form @submit="submitForm">
        <q-input
          outlined
          use-input
          type="phone"
          id="phone"
          v-model="device_input"
          label="Введите модель устройства..."
        />
        <q-list link>
          <q-item tag="label">
            <q-item-section avatar>
              <q-radio v-model="segment_input" val="дисп" />
            </q-item-section>
            <q-item-section>
              <q-item-label>Дисплей</q-item-label>
            </q-item-section>
          </q-item>

          ...

          <q-item tag="label">
            <q-item-section avatar>
              <q-radio v-model="segment_input" val="text" />
            </q-item-section>
            <q-item-section>
              <q-input type="input" dense @focus="segment_input = 'text'" v-model="segment_text" />
            </q-item-section>
          </q-item>
        </q-list>
        <q-btn class="full-width q-mt-md" color="secondary" type="submit">рассчитать</q-btn>
      </q-form>

It looks:

And when I release the mouse button after selection, QInput immediately loses focus.

Maybe I chose the wrong way to implement this idea?

[s.molinari]

Are you trying to make a single selection with radio buttons? Like this?

https://codepen.io/smolinari/pen/dybrmBo?&editable=true&editors=101

It doesn’t make complete sense to have radios inside a QInput.

Scott

[Innoel]

@s-molinari No, vice versa. I wanna put QInput inside label of radio, can I?

[metalsadman]

@Innoel use @click.stop on your q-input, like so https://codepen.io/metalsadman/pen/MWgxBxB?&editable=true&editors=101.

[s.molinari]

And add v-close-popup on the other radios, if you want the menu to close on selection of the radio.

Scott