Open jeannen opened 2 days ago
v2.18.7
<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)
v-for
When the modal is opened, the input is automatically focused even if set to false
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); });
No response
I have the same situation in Slideover where the first input is focused.
Environment
Version
v2.18.7
Reproduction
(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
Additional context
No response
Logs
No response