Overlay is blocking input to xlsx spreadsheet how to fix that in my case

Question

I created a codesandbox to illustrate this.
Basically what happens is the XLSX spreadsheet cells can't be clicked on because the overlay transparent box is blocking this. I know why this happens and it can be fixed by setting style pointer-events: none; But then the overlay stops working because it slides out when mouse moves.

The overlay with green buttons slides in and out and the "Box" that catches the mouse move for the overlay is blocking the clicks to go through to the spreadsheet under.

How can I fix so I can edit all cells in the spreadsheet and still have the overlay working? IS there a way to make an overlay like this that let click through and also react to mouse events?

Answer 1

Unfortunately it seems impossible to achieved that having the Overlay as a sibling of the element you're overlaying, but it works if you are allowed to change the structure putting the XLSX component as child of the overlay

Overlay.js

class Overlay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hoverIndex: null
    };
  }

  handleMouseEnter = (e) => {
    if (e.currentTarget.id) {
      this.setState({ hoverIndex: e.currentTarget.id });
    }
  };

  handleMouseLeave = (e) => {
    this.setState({ hoverIndex: null });
  };

  render() {
    const { fileData, children } = this.props;
    const { hoverIndex } = this.state;
    return (
      <div
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
        className={`box-container`}
        id={fileData}
        key={fileData}
      >
        <div
          onMouseLeave={this.handleMouseLeave}
          className={`box-content ${hoverIndex === fileData ? "hovered" : ""}`}
        >
          <div className="text-group">SpreadSheet File</div>

          <div className="btn-group">
            <button className="btn btn-secondary" type="button">
              Open File
            </button>
            <button className="btn btn-secondary" type="button">
              Edit Description
            </button>
            <button className="btn btn-secondary" type="button">
              Download
            </button>
            <button className="btn btn-secondary" type="button">
              Push me for fun
            </button>
          </div>
        </div>

        {children}
      </div>
    );
  }
}

overlay-xlsx-renderer.scss

.box-container {
  width: 100%;
  height: 100%;
  margin: 0% auto;
  overflow: hidden;
  position: relative;
}

.box-content {
  width: 60%;
  height: 100%;
  background: #1d1d1e;
  position: absolute;
  left: -60%;
  transition: left 0.6s;
  color: white;
  overflow: auto;
  z-index: 10;
}

ItemRendered.js

    ...
      case "xlsx": {
        return (
          <div className="outer">
            <Overlay fileData={fileData}>
              <div className="pg-viewer-wrapper">
                <div className="pg-viewer" id="pg-viewer">
                  <XlsxViewer
                    responseType="arraybuffer"
                    filePath={filePath}
                    width={0}
                    height={0}
                  />
                </div>
              </div>
            </Overlay>
          </div>
        );
      }
    ...

you can check it working in this sandbox fork