Terminal eats click events

[jtbandes]

When adding mousedown, mouseup, and click listeners on the terminal container element, and then clicking on the terminal, I observe that the click is sometimes not delivered. (On macOS with a Magic Trackpad, I noticed that the click event almost always works when using tap to click and tapping with a single finger, but when actually pressing the trackpad to click it, the click event is usually not delivered.)

I suspect this is a clue: right-clicking on the logged event.target and clicking "Reveal in Elements panel" sometimes shows "Node cannot be found in the current page". Perhaps the browser is not delivering the click event because the mousedown/mouseup are not on matching elements, or the clicked element is removed before the click finishes.

Screen.Recording.2024-11-19.at.4.49.26.PM.mov

Details

• Browser and browser version: Chrome 131.0.6778.70
• OS version: macOS 15.1
• xterm.js version: 5.5.0

Note: same behavior seems to happen with 5.6.0 beta as well: https://codesandbox.io/p/sandbox/xtermjs-test-forked-qfng37

Steps to reproduce

https://codesandbox.io/p/sandbox/xtermjs-test-forked-c5s8g4
Or visit https://c5s8g4.csb.app/ and view the console

import "./styles.css";
import "@xterm/xterm/css/xterm.css";
import { Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";

const container = document.getElementById("app");

const terminal = new Terminal({
  cursorStyle: "bar",
  allowProposedApi: true,
});

const fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);

terminal.open(container);

for (let i = 0; i < 100; i++) {
  if (i > 0) {
    terminal.write("\r\n");
  }
  terminal.write(
    `line ${i}: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua`
  );
}

const resizeObserver = new ResizeObserver((_entries) => {
  fitAddon.fit();
});
resizeObserver.observe(container);

container.addEventListener("mousedown", (e) => {
  console.log("mousedown", e.target);
});
container.addEventListener("mouseup", (e) => {
  console.log("mouseup", e.target);
});
container.addEventListener("click", (e) => {
  console.log("click", e.target);
});

[Tyriar]

I think we do prevent bubbling sometimes as we handle mouse events in various ways. Seems a bit weird that click works sometimes and sometimes not though.

[jtbandes]

Yes, even with a capture event listener, I saw the events were sometimes missing. I think this means xtermjs is not intentionally stopping the events, but they are actually never delivered.