[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>
  );
});

[andelkocvjetkovic]

thank you :)

[jackbisceglia]

curious about any updates here? this also feels awkward to me and i don't really want to be overriding default behavior that might be degrading the built-in a11y in ways i'm not anticipating. is this just the best way to handle this?

i'm also having to manually blur the active element on interactOutside event because otherwise the ordering my dialog contents blur after close event, which is different than other close methods. i would think this too might cause some common issues for folks

[Aigarsss]

Thanks this solution worked for me.

I am kind of surprised that there is no native solution for this. I think it would make sense to be able to keep focus on the modal trigger if controlled dialog is used.

[attaboy]

This is a fantastic approach. I ended up turning it into a re-usable hook so I could add it into more than one component more easily:

export function useRestoreFocus() {
  const previouslyActiveElementRef = React.useRef<Element | null>(null);

  const onOpenAutoFocus = () => {
    previouslyActiveElementRef.current = document.activeElement;
  };

  const onCloseAutoFocus = () => {
    if (previouslyActiveElementRef.current && previouslyActiveElementRef.current instanceof HTMLElement) {
      previouslyActiveElementRef.current.focus();
    }
  };

  return { onOpenAutoFocus, onCloseAutoFocus };
}

I agree it seems like Radix should handle this internally, because without this, controlled dialogs do not follow accessibility guidelines.

[cgatian]

Unfortunately, I think Radix is essentially dead at this point. These really important issues have been overlooked too long.