Prevent <Diaglog.Close/> from being focused on open?

[arkmech]

<Dialog.Content>
   {children}
  <Dialog.Close>
            <ButtonClose />
  </Dialog.Close>
</Dialog.Content>

• <Diaglog.Close/> is child of <Dialog.Content/>.
• Going with Uncontrolled method
• I have Tailwind focus styles on <Dialog.Close/>, on Dialog opening, it automatically focuses to the <Dialog.Close/>. Is this because it is the only focusable element? I have text in there, but obviously that ain't focusable.

[joaom00]

Is this because it is the only focusable element? I have text in there, but obviously that ain't focusable.

Yeah, when dialog opens the first focusable element is focused.

If you want to customize the element that's focused when dialog is opened you can use onOpenAutoFocus prop with event.preventDefault(). I don't suggest just disabling this behavior.

[arkmech]

If it is best accessibility practice, to leave first element focusable. I will do that. Adding more focusable elements and now it focuses on my primary button. So I think I'm good.