The input box in the modal will automatically gain focus

[Jevin0]

Environment

nuxt: 3.15.1

Version

v2.20.0

Reproduction

Description

<UModal>
  <UInput v-model="state.name" placeholder=".." />
  <UInput v-model="state.name1" placeholder="..." />
</UModal>

When a modal contains one or more input boxes, the first input box will always get focus automatically.
If I manually add a close button in the upper right corner, it will trigger a validation when I click it. This is not good. How can I avoid the input box getting focus when opening the modal?

Additional context

Logs

[maxsteinwand]

https://headlessui.com/v1/vue/dialog#managing-initial-focus

You can use a ref on a hidden div to change the initial focus. Sadly directly passing null or undefined will not work as this will then automatically use the first element.

<script setup lang="ts">
const isOpen = ref(false);
const hiddenRef = ref(undefined);
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />
    <UModal v-model="isOpen" :initial-focus="hiddenRef">
    <div ref="hiddenRef" style="display: none" />
      <div class="p-4">
        <UInput />
      </div>
    </UModal>
  </div>
</template>