title: React: Remove focus from input element on escape key
body: <p>I have an input tag, when I press the escape key, I want the focus on the input element to go away, meaning there is no longer a text cursor or any focus styling(when the user types, their input will not go into the input tag).</p>
  <p>The code below is my attempt at implementing the functionality described above, but it does not work as intended. I would like to get this code to work as intended.</p>
  <pre><code>import React, { useRef } from 'react';
  
  const onEscape = function (action) {
      window &amp;&amp; window.addEventListener('keydown', (e) =&gt; {
          if (e.key === &quot;Escape&quot;) {
              action();
          };
      });
  };
  
  const MyComponent = () =&gt; {
  
      ...
  
      const descRef = useRef();
      onEscape(() =&gt; {
          descRef.blur();
      });
  
      return (
          &lt;div&gt;                
              &lt;input
                  ref={descRef}
                  ...
              /&gt;
          &lt;/div&gt;
     );
  };
  </code></pre>
  <hr />
  <p>I have tested that <code>onEscape</code> function and it works when other actions are passed to it(when the user presses the escape key, it executes whatever function has been passed to the onEscape function)</p>