[V2] How to prevent button pre-selection on UModal?

[Yves852]

Description

Hello.

With a modal when it opens the first button present is selected. Is there a way to change selection order or prevent it completely?
In exemple below the reset button is pre-selected.

I could reorder buttons instead but I would like no pre-selections instead and prevent users' "miss-click". Thanks.

    <UModal v-model="dialog" prevent-close>
      <UCard>
        <p>Reset data or continue?</p>

        <div class="flex justify-between">
          <UButton color="gray" variant="ghost" @click="reset">
            Delete current data
            <UIcon name="i-heroicons-x-mark-20-solid" class="text-red-600" />
          </UButton>

          <UButton color="gray" variant="ghost"  @click="continue">
           Continue
            <UIcon name="i-mdi-arrow-right-circle" class="text-primary" />
          </UButton>
        </div>
      </UCard>
    </UModal>

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[benjamincanac]

This is due to Headless UI behavior and we can't do much about it. However, you might be able to workaround it using the initial-focus prop: https://headlessui.com/v1/vue/dialog#managing-initial-focus. Even though it is not defined in the component the prop will be passed to the Dialog component.

[Yves852]

In the meantime we moved to Nuxt UI pro v3.

I tried the workaround like the following but doesn't seem to work.

<script setup lang="ts">
+ const continueBtn = ref()
</script>

- <UModal v-model="dialog" :dismissible="false">
+ <UModal v-model="dialog" :dismissible="false" :initial-focus="continueBtn">
   <template #content>
      <UCard>
        <p>Reset data or continue?</p>

        <div class="flex justify-between">
          <UButton color="gray" variant="ghost" @click="reset">
            Delete current data
            <UIcon name="i-heroicons-x-mark-20-solid" class="text-red-600" />
          </UButton>

-          <UButton color="gray" variant="ghost"  @click="continue">
+          <UButton ref="continueBtn" color="gray" variant="ghost"  @click="continue">
              Continue
            <UIcon name="i-mdi-arrow-right-circle" class="text-primary" />
          </UButton>
        </div>
      </UCard>
    </template>
  </UModal>

[benjamincanac]

In v3, to disable autofocus you can do this:

<UModal :content="{ onOpenAutoFocus: (e) => e.preventDefault() }" />

[Yves852]

It solved my issue thanks 👍