Remove Trigger/Button focus after closing Dialog on mobile

[Nemmcy]

After closing a Dialog on mobile, there is a systematic focus on the Trigger or Button element (See attached image). The user has to tap twice on the screen, first, on the Overlay to close the Dialog and an unexpected second time to remove the focus on the Trigger or Button.

Simple form:

/*These are all renamed Primitives*/
<Dialog>
    <DialogTrigger asChild><button>open</button></DialogTrigger>
    {/* Same problem with: <DialogTrigger>open</DialogTrigger> */}
    <DialogPortal>
        <DialogOverlay />
        <DialogContent>Content</DialogContent>
    </DialogPortal>
</Dialog>

Custom logic:

<Dialog open={open}>
    <button onClick={handleOpen} aria-label='open dialog'>open</button>
    <DialogPortal>
        <DialogOverlay onClick={handleClose} />
        <DialogContent>Content</DialogContent>
    </DialogPortal>
</Dialog>

In both cases, we have the same problem... This problem is also observable with any example provided in the official docs or by the Radix UI developers.

This leads to a bad experience (although it might suit screen readers?) as the user expects to be able to immediately interact with the content after closing the Dialog.

How could we remove it? Thank you in advance.

Image: blue outline appears after closing the Dialog,

[benoitgrelard]

Hi @nemdo, the automatic focus is part of the accessibility for this pattern.

However, I'm not sure I really understand the issue. Having the button focused, shouldn't prevent you from interacting with anything on the page. If it does, something else might be at play here.

[Nemmcy]

It actually prevents mobile users from interacting with anything on the page because there is an auto-focus on the Trigger after closing the Dialog. This issue is present in the simplest example provided in your docs. On your phone, try all published examples and you will always face this interactivity problem.

I believe it is a real issue as removing the auto-focus doesn't alter in any way the accessibility of the component!

Same issue with the Select component: https://github.com/radix-ui/primitives/issues/1246#issue-1169543242

I switched to Reach UI's Dialog component because it doesn't have an auto-focus.

[jjenzz]

the autofocus should be fine, it sounds like pointer-events: none isn't being removed 🤔

[benoitgrelard]

Yeah that's what I mean, it shouldn't be an issue with focus. It does sounds like potentially an issue with pointer-events.

[LarssonHenrik]

@nemdo Hi, I bumped into this issue as well where it was not possible to interact with some elements before clicking again anywhere on the screen.

I managed to solve it based on @jjenzz idea above by taking care of the pointer-events style on the body tag she mentioned.

I do like this for now:

I have a handleDialog function which runs on open and close of the dialog:

const handleOpen = (shouldOpen) => {
    if (shouldOpen) {
      // Open the dialog
      setOpen(true);
    } else { 
      // Close the dialog
      setOpen(false);

      // Remove the pointer-events style property on close
      const body = document.querySelector('body');
      body.style.removeProperty('pointer-events');
    }
  }

After I added this, it seems to be working better!

[jjenzz]

@benoitgrelard would the recent pointer event fixes in the latest rc solve this? sounds like it 🤔

[benoitgrelard]

Yes that does sound like it.
@LarssonHenrik, it sounds like what you're describing is something we fixed recently.
Would you mind testing with the latest rc? https://www.npmjs.com/package/@radix-ui/react-dialog/v/0.1.8-rc.29

[LarssonHenrik]

@benoitgrelard @jjenzz @nemdo

I tried the new RC and it worked perfectly and solved the issue!

And by the way thanks for Radix UI, it's a fantastic set of headless components!

[kiily]

Hi there, we're facing the same issue here on v0.1.7 and tried to use onCloseAutoFocus to prevent this from happening as per the doc https://www.radix-ui.com/docs/primitives/components/dialog (using event.preventDefault).

I can also see that pointer-events: none remains in the body tag.

Any estimate on the release time for version 0.1.8 of this component? We'd love to use it in production but this is currently a blocker for us.

[benoitgrelard]

v1.0.0 of all components should drop in the next couple weeks.

[kiily]

That's great to hear! Thank you for the super swift reply 🎉

I can confirm that @LarssonHenrik's solution above is also working (I just realized I was implementing something wrong) and that should do the trick at least for now 🙏

Will keep an eye on this