QDialog inside QBtnDropdown Item

[toytonic]

When trying to colocate a QDialog inside a QBtnDropdown, I cannot make the item closing the dropdown and at the same time opening a dialog (both via v-close-popup directive or calling hide on the ref). I guess it's because of the nesting which maybe is not how dialogs are intended to be used. You could set persistent on the dropdown to make it work but that's not what we want. Still we would very much like to colocate the logic of opening a dialog to the originator (in this case a menu item).

I tried with the following structure:

<template>
  <q-page class="flex flex-center">
    <q-btn-dropdown color="primary" label="Dropdown Button">
      <q-item clickable @click="isOpen = true" v-close-popup>
        <q-item-section>
          <q-item-label>Open Test Modal</q-item-label>
        </q-item-section>

        <q-dialog v-model="isOpen">
          <q-card>
            <q-card-section>
              <div class="text-h6">This is a Test Modal</div>
            </q-card-section>
          </q-card>
        </q-dialog>
      </q-item>
    </q-btn-dropdown>
  </q-page>
</template>

<script setup>
import { ref } from "vue";
defineOptions({
  name: "IndexPage",
});

const isOpen = ref(false);
</script>

Codesandbox available here: https://codesandbox.io/p/devbox/frosty-sun-sdwfxc?file=%2Fsrc%2Fpages%2FIndexPage.vue%3A25%2C4