Dialog throws error if there are no focusable elements

I get the following error if I create a Dialog with no interactive components (just text): Error: There are no focusable elements inside the <FocusTrap />

[Terkea]

I found a way around that.

simply add a ref to the dialog and to a div inside the body UPDATE: found this mentioned in the docs https://headlessui.dev/react/dialog#managing-focus-within-your-dialog

let refDiv = useRef(null)

<Dialog
	initialFocus={refDiv}
	as="div"
	className="fixed inset-0 z-10 overflow-y-auto bg-gray-500 bg-opacity-60"
	onClose={closeModal}
>

<div ref={refDiv}>
    {children}
</div>

[xairoo]

You have to set initialFocus and also use it in your return code.

Based on the example code @ https://headlessui.dev/react/dialog#rendering-to-a-portal they forgot to place ref={cancelButtonRef} inside an element (doesn’t have to be a button, could be a div or so too).

const cancelButtonRef = useRef();

...

initialFocus={cancelButtonRef}

...

<button
	ref={cancelButtonRef}
	type="button"
	className="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-900 bg-blue-100 border border-transparent rounded-md hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500"
	onClick={closeModal}
>
	Got it, thanks!
</button>