autofocus false not working inside UModal

[jeannen]

Environment

• Operating System: Darwin
• Node Version: v22.9.0
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Version

v2.18.7

Reproduction

 <UModal v-model="isOpen" class="mx-auto max-w-xs sm:max-w-[425px] md:max-w-[600px] lg:max-w-[800px] xl:max-w-[1000px]" >
        <UCard>
            <template #header>
                <h3 class="text-xl font-bold text-gray-900 dark:text-white">Supported Languages</h3>
                <p>Taknotes supports 50+ languages for recording & transcriptions</p>
            </template>
            <template #default>
                <div>
                    <div class="relative mb-4">
                        <UInput v-model="search" placeholder="Search languages..." :autofocus="false" />
                    </div>
                    <div class="h-[300px] overflow-y-auto md:h-[400px] lg:h-[500px]">
                        <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
                            <div v-for="lang in filteredLanguages" :key="lang.id" class="bg-background flex flex-col items-center justify-center rounded-md border p-2">
                                <span class="mb-1 text-3xl" role="img" :aria-label="`Flag of ${lang.name}`">{{ lang.flag }}</span>
                                <span class="text-center text-xs">{{ lang.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <UButton color="accent" size="xl" block @click="handleCtaAction">{{ ctaText }}</UButton>
            </template>
        </UCard>
    </UModal>

(Need to remove the v-for)

Description

When the modal is opened, the input is automatically focused even if set to false

It would be good to have it respect the property

The only fix I found is to add a timeout of 1ms when the modal is mounted

<UInput v-if="showSearch" v-model="search" placeholder="Search languages..." :autofocus="false" />

onMounted(() => {
        setTimeout(() => {
            showSearch.value = true;
        }, 1);
    });

Additional context

No response

Logs

No response

[kicaj]

I have the same situation in Slideover where the first input is focused.