[Dialog] Pressing escape key inside of dialog when footer exists in Safari scrolls to the last focusable element on the page

[ryankauk]

🐛 Bug report

Test setup

• Use Safari browser
• Reach dialog with text input inside of it
• <footer> tag exists on page

Current Behavior

Right now when you open the dialog (before you make any user action on the dialog) press the escape key and it jumps to the bottom of the screen

Expected behavior

I feel as though this is an undesirable effect and should react the same as when a footer doesn't exist. This may be due to safari behaviour

Reproducible example

Could not use code sandbox as it didn't show the issue since the virtual browser is not safari based. Using this simple reproducible code in any scenario should be sufficient as long as you open the page in safari.

import React from "react";
import Dialog from "@reach/dialog";

export default function DialogExample() {
  const [showDialog, setShowDialog] = React.useState(false);
  const open = () => setShowDialog(true);
  const close = () => setShowDialog(false);
  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <input />
      </Dialog>
      <div style={{ height: "200vh" }}></div>
      <footer>footer</footer>
    </div>
  );
}

Suggested solution(s)

Maybe it's possible to block escape key default event?

Additional context

N/A

Your environment

Software	Name(s)	Version
Reach Package	@reach/dialog	0.13.2
React		17.0.1
Browser	safari	14.0.3
Assistive tech
Node		v12.18.4
npm/yarn	yarn	1.22.10
Operating System	MacOS Big Sur	11.2

[ryankauk]

It seems that it scrolls to the last element on the page so that the top is at minimum half way into the screen regardless what the element is.

[chaance]

Sounds like it might be an issue with react-focus-lock which we use with the returnFocus prop. Based on your explanation it sounds like the user hasn't yet interacted with anything when the modal appears, is that correct? Does the issue also occur when you open the dialog by clicking on the trigger button?

[ryankauk]

Yea this is before any interaction. Yea the dialog is controlled manually with a button onClick event using useState. When I click the button and the dialog opens, before any interaction press escape and it jumps.

[chaance]

Thanks, I'll try to take a look this week and see if I can figure out the issue. @theKashey flagging just in case anything sticks out to you here!

[visnup]

I've found a workaround for this is to add something like:

  if (document.activeElement instanceof HTMLElement) {
    document.activeElement.blur();
  }

in the close() function before setting showDialog to false.

[visnup]

While investigating this, I disabled react-focus-lock and that didn't resolve the issue, so I don't think it's much at fault, though could be confusing the issue. I also disabled the scroll lock functionality too and still had the jump occur.

[theKashey]

🤔 the jump seems to be related to the focusing. So the question is which element become focused after dialog close...

No idea what is not working, but I'll take a look. @chaance - can you please assign this issue to me?