How to turn off initial focus when opening headlessui?

[youngseo-im]

I'm using headless ui in my vue3 + typescript project

How can I turn off the initial focus on a slotted component input?

Assigning a null value to initialFocus did not work.

`

<script setup lang="ts"> import { Dialog, DialogOverlay, TransitionRoot, TransitionChild, DialogPanel } from '@headlessui/vue' import { ref } from 'vue' const props = defineProps<{ isOpen: boolean closeModal: () => void }>() const initialFocus = ref(null) </script>

        <TransitionChild
          as="div"
          enter-from-class="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
          enter-to-class="translate-y-0 opacity-100 sm:scale-100"
          leave-from-class="translate-y-0 opacity-100 sm:scale-100"
          leave-to-class="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95"
          class="w-full">
          <DialogPanel
            class="w-full px-48 pt-40 pb-32 align-middle transition-all transform bg-white shadow-xl rounded-tl-48 rounded-tr-48">
            <slot></slot>
          </DialogPanel>
        </TransitionChild>
      </div>
    </Dialog>
  </TransitionRoot>
</Teleport>

`

[1mehdifaraji]

For accessibility reasons, dialog should contain at least one focusable element. By default, the Dialog component will focus the first focusable element (by DOM order) once it is rendered, and pressing the Tab key will cycle through all additional focusable elements within the contents.

To disable this behavior or modify it first you need to define a react ref state:

const dialogRef = useRef(null);

Then define initialFocus prop of the Dialog component to it and have a hidden div for your ref state.

<Dialog initialFocus={dialogRef ? dialogRef : undefined}>
    <div style={{ display: "none" }} ref={dialogRef} />
</Dialog>

You can also set the element you want to be focused at first render like this:

<Dialog.Panel>
        <Dialog.Title>...</Dialog.Title> 
        <button ref={dialogRef}>
            ....
        </button>
</Dialog.Panel>

Vue code defining initialFocus:

const completeButtonRef = ref(null)

<Dialog :initialFocus="dialogRef">
   <div ref="dialogRef" :style="{display : 'none' }" /> 
</Dialog>

<button ref="dialogRef">
   ...
</button>