Failing to capture the Escape key

Describe the bug

Callbacks for an input element do not capture the Escape key.

// the callback
  const clear = (e) => {
    console.log("CLEAR input:", e.key);
    if (e.key === "Escape" || e.key === "Esc") {
      /* never makes it here */;
    }
  };

   ...
 // fragment of the component
     <input
        name={"great-input"}
        label={"great-input"}
        value={value}
        default={value}
        onChange={onChange}
        onKeyDown={clear}
      />

Did you try recovering your dependencies?

Yes.
yarn 1.22.4

Which terms did you search for in User Guide?

• capturing the Escape key
• key value detection
• onKeyDown

I found my way to the SyntheticEvent section of the react documentation. I’m able to capture other keys and confirmed that Escape should be part of the spec.

Also, I tried using useEffect to register my callback as a listener to the document:

   useEffect(() => {
    const canUseDOM = !!(
      typeof window !== "undefined" &&
      window.document &&
      window.document.createElement
    );
    if (!canUseDOM) {
      console.error("Window is not defined");
      return null;
    }
    window.document.addEventListener("keydown", clear);
    return () => window.document.removeEventListener("keydown", clear);
  }, [clear]);

Environment

Environment Info:

current version of create-react-app: 3.4.1 running from /Users/edmund/.npm/_npx/54059/lib/node_modules/create-react-app

System: OS: macOS 10.15.6 CPU: (12) x64 Intel® Xeon® CPU E5-1650 v2 @ 3.50GHz Binaries: Node: 14.3.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/bin/npm Browsers: Chrome: 84.0.4147.125 Firefox: Not Found <<< This is weird b/c I’m using firefox-dev; also set as my BROWSER in env Safari: 13.1.2 npmPackages: react: ^16.13.1 => 16.13.1 react-dom: ^16.13.1 => 16.13.1 react-scripts: 3.4.2 => 3.4.2 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

1. Set-up the app as described.
2. Enter input into the text field (input)
3. case 1: watch most keys print in the console with the onKeyDown event
4. case 2: hit <ESC> => not output to the console when I would have expected it.

Expected behavior

Print the e.key value to the console (among other things).

Actual behavior

Activates the BODY element without first printing to the console the e.key value of “Escape”.

Thank you in advance for any pointers.

- E

[miskreant]

@EdmundsEcho I thought I was experiencing the exact issue described here, in which all keypresses would register except ESC (27). However, in my case the issue was that a Chrome Extension was swallowing the event – specifically, Vimium – and thus disabling that extension resolved the problem.

[albertg361]

Ok i take care of it how much is Facebook going to pay me for fixing isssue

On Sun, Dec 18, 2022, 2:58 PM Forrest Wilkins @.***> wrote:

I’m getting this issue even with all of my extensions disabled.

— Reply to this email directly, view it on GitHub https://github.com/facebook/create-react-app/issues/9485#issuecomment-1356873687, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYGSDI7I6IQKJN5NKXZ3RWTWN53HTANCNFSM4P7UGNTA . You are receiving this because you are subscribed to this thread.Message ID: @.***>