Terminal eats click events #5220
Description
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);
});