Quasar: QInput loses focus when used with QPopupProxy

Question

I'm trying to combine a QField with a QPopupProxy. The proxy shows a QDate. After selecting a date, the field will be filled with a transformed value.

<template>
  <q-field
    label="Input date"
    v-model="date"
    :rules="[val => !!val || 'This field is required']"
    lazy-rules
  >
    
    <template #control="{ modelValue, emitValue }">
      <q-popup-proxy>
        <q-date
          mask="YYYY-MM-DD"
          :model-value="transformToString(modelValue)"
          @update:model-value="(value, reason) => transformToDate(value, reason)"
          v-close-popup
        ></q-date>
      </q-popup-proxy>
      
      <div v-if="date">{{ date }}</div>
    </template>
  </q-field>
</template>

<script setup>
// imports

const date = ref();

function transformToString(value) { /* implementation */ }

function transformToDate(value, reason) { /* implementation */ }
</script>

Problem

The issue with this is that the field loses focus as soon as the popup opens, which will trigger validation and render the error message.

Also there is some weirdness going on when clicking the field. When clicking above the label, the popup doesn't open.

There is an issue for this on Github, which unfortunately was closed without giving a solution.

Here is a Codepen example

How can I open the popup without having the field lose focus? Also, how can I open the popup, no matter where I click in the field?