Unable to Focus Input Field in Nested Modals Using Headless UI

[Mukhami]

Hello,
I'm using Headless UI (@headlessui/vue: ^1.7.16) and Tailwind UI for my project, and I’ve encountered an issue with nested modals. When I open a modal that contains a form, the input field in the first modal correctly receives focus and works as expected.

However, if I open another modal on top of the first one (from a button in the first modal), the input field in the second modal cannot receive focus properly. Clicking on the input field does not allow typing until I click outside the input and then back into it.

Here’s how I’ve structured the implementation:

A button opens the first modal.
The first modal contains an input field (focusable) and two buttons: one to save and one to open the second modal.
The second modal opens correctly but exhibits the focus issue described above.

I've attached a video demonstrating the issue. In the video, you’ll see that the input field in the first modal works fine.
When the second modal is opened, I attempt to focus on its input field but cannot type in it until I click outside the input and back into it.

Environment
Package Version: @headlessui/vue: ^1.7.16
Vue Version: vue: ^3.3.4
Tailwind CSS Version: tailwindcss : ^3.3.3
Browser: Google Chrome

Any guidance or suggestions would be greatly appreciated. Thank you!

Screen.Recording.2025-01-03.at.01.42.12.mov

[Mukhami]

I implemented two changes to resolve this:

1. Replace Buttons with Links ( tags)
   I changed the elements that open the nested modals from button elements to a tags. This ensured the focus behavior transitioned properly when opening the nested modal.

Example:

<!-- Before: Using a button -->
<button @click="openNestedModal">Open Nested Modal</button>

<!-- After: Using an a tag -->
<a href="#" @click.prevent="openNestedModal">Open Nested Modal</a>

2. Add a Hidden Anchor for Initial Focus
   To ensure proper focus handling inside each modal, I added a hidden tag in the modal component and referenced it using Headless UI’s Dialog initialFocus property. This explicitly directs focus to the hidden anchor when the modal opens.

Example:

<template>
  <Dialog :open="isModalOpen" @close="closeModal" :initialFocus="hiddenAnchorRef">
    <div>
      <!-- Hidden anchor for initial focus -->
      <a ref="hiddenAnchorRef" href="#" class="sr-only">Hidden Focus Anchor</a>

      <!-- Content -->
      <input type="text" placeholder="Type here" />
    </div>
  </Dialog>
</template>

<script setup>
import { ref } from 'vue';

const hiddenAnchorRef = ref(null);
</script>

From what I have gathered:

Replacing button with a tags: Buttons tend to retain focus in certain situations, which can disrupt the focus flow when a new modal opens. Using a tags ensures that the focus shifts away smoothly.

Adding initialFocus: Explicitly setting an initial focus target within the modal helps Headless UI manage focus transitions effectively, preventing any conflicts.