grid.react.js

class Grid extends React.Component {

  _timeoutID;
  
  constructor() {
    this.state = {
      isManagingFocus: false,
    };
  }
  
  render() {
    return (
      <div
        role="grid"
        onBlur={this._onBlur}
        onFocus={this._onFocus}
        >{this.props.children}</div>
    );
  }
  
  _onBlur() {
    this._timeoutID = setTimeout(() => {
      if (this.state.isManagingFocus) {
        this.setState({
          isManagingFocus: false,
        });
      }
    }, 0);
  }
  
  _onFocus() {
    clearTimeout(this._timeoutID);
    if (!this.state.isManagingFocus) {
      this.setState({
        isManagingFocus: true,
      });
    }
  }
}

Functional approach :

import { useState } from "react";

const FocusOutside = ({clickedOutside, ...props})=>{
  
  let _timeoutID;

  const [IsManagingFocus, setIsManagingFocus] = useState(false);

  const _onBlur = ()=>{
    _timeoutID = setTimeout(() => {
      if (IsManagingFocus) {
        setIsManagingFocus(false)
        clickedOutside()
      }
    }, 0);
  }

  const _onFocus = ()=>{
    clearTimeout(_timeoutID);
    if (!IsManagingFocus) {
      setIsManagingFocus(true)
    }
  }

  return (
      <div
        onBlur={_onBlur}
        onFocus={_onFocus}
        >{props.children}</div>
    );
}

export default FocusOutside;