[Dialog] Controlling onClose focus on a Controlled Dialog

[cgatian]

I'm having difficulty getting a Dialog to return focus to the last document.activeElement on the page. This works properly when using a DialogTrigger element within a Dialog, but in my case, I would like the Dialog to be controlled as a separate component and have the triggering button not be colocated within the Dialog.

When a button (outside of the dialog) causes the Dialog to open and the dialog is closed, the focus goes to the document.body. Is there a way to programmatically set the dialog's triggerRef?

In most cases, there is a trigger button to initiate the Dialog, I need to display a dialog when the user hasn't interacted with the page over a given time. These dialogs are triggered using a useEffect without an element that triggered it.

Is this by design, or am I just overlooking something obvious?

Thank you!

[cgatian]

I was able to work around this issue by using the onOpenAutoFocus and onCloseAutoFocus events on DialogContent.

• Create a custom DialogContent
• Intercept the onOpenAutoFocus callback to capture the current document.activeElement
• Intercept the onCloseAutoFocus callback and invoke focus on previousActiveElement. If a DialogTrigger was used, radix will attempt to focus within their callback of onCloseAutoFocus.

This feels awkward and almost like it should be built-in, so I'm hoping 🙏 someone can tell me I shouldn't do this and there's an easier way. But perhaps, this isn't a common use case?

Custom DialogContent

export const DialogContent = forwardRef<
  ElementRef<typeof DialogPrimitive.Content>,
  ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({...props }, ref) => {
  const previousActiveElement = useRef<HTMLElement | null>(null);

  return (
    <DialogPortal>
      <DialogOverlay />
      <DialogPrimitive.Content
        onOpenAutoFocus={composeEventHandlers(props.onOpenAutoFocus, () => {
              previousActiveElement.current = document.activeElement as HTMLElement;
        })}
        onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
              // Return focus to the previously active element
              // Radix will immediately follow this callback and attempt to focus the DialogTrigger if it's provided
              previousActiveElement.current?.focus();
        })}
        ref={ref}
        {...props}
      />
    </DialogPortal>
  );
});