Context Menu doesn't work when container has transform: translate

Details

• Browser and browser version: Chrome 71.0.3578.98
• OS version: Windows 10 & MacOS Mojave
• xterm.js version: v3.10.1

Steps to reproduce

1. Visit https://o9xjjwo47y.codesandbox.io/
2. Right click anywhere inside the black xterm terminal
3. See that it opens up the canvas context menu instead of the textarea context menu

Related: #1810

Example code snippet

Also here: https://codesandbox.io/s/o9xjjwo47y

import React from "react";
import ReactDOM from "react-dom";
import Draggable from "react-draggable";
import { Terminal } from "xterm";
import * as fit from "xterm/lib/addons/fit/fit";
import "xterm/dist/xterm.css";

import "./styles.css";

Terminal.applyAddon(fit);

class App extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      x: 0,
      y: 0
    };
  }
  componentDidMount() {
    const term = new Terminal();
    term.open(document.getElementById("xterm"));
    term.fit();
    term.write("Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ");
  }

  render() {
    const { x, y } = this.state;
    return (
      <div className="App">
        <h1>Xterm.js Right Click Bug Example</h1>
        <p>
          Right click anywhere inside the black terminal and you will see that
          the canvas context menu shows up instead of the textarea context menu
        </p>
        <p>
          If you open dev-tools and remove the "transform: translate" style from
          the parent container div, then the correct context menu shows up
        </p>
        <Draggable
          position={{ x, y }}
          onDrag={(e, data) => this.setState({ x: data.x, y: data.y })}
        >
          <div
            id="parent-container"
            style={{
              width: 500,
              height: 500,
              padding: "1em",
              background: "#333"
            }}
          >
            <div id="xterm" />
          </div>
        </Draggable>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[Tyriar]

@zxlin ev.clientX and ev.clientY are probably relative to the wrong element, that would need to be tweaked to work in both cases.

[zxlin]

@mofux We have xterm inside a draggable container to allow the user to lay out their work space to their personal preference. That’s simply the lib’s way of implementing draggable.

One thing of note here is that the transform style doesn’t need to be on the parent element of xterm to cause this issue, if any of xterm’s ancestor elements has the transform style, this bug occurs.