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.

[jtbandes]

@Tyriar @jerch I discovered that this is because of this refresh() call inside SelectionSerivce.handleMouseDown:

xterm.js/src/browser/services/SelectionService.ts

Line 483 in 41e8ae3

this.refresh(true);

This ends up calling DomRenderer.renderRows() which uses replaceChildren():

xterm.js/src/browser/renderer/dom/DomRenderer.ts

Lines 451 to 452 in 41e8ae3

	rowElement.replaceChildren(
	...this._rowFactory.createRow(

It turns out that when a child is replaced during a click, the browser does not fire a click event (tested in Chrome, Safari, and Firefox with the same results): https://codesandbox.io/p/sandbox/click-event-test-yytwry / https://yytwry.csb.app/

You can see that clicking the background (app) fires a click event, while clicking the child does not, if the child is replaced:

Screen.Recording.2024-12-06.at.2.51.43.PM.mov

However, I'm not sure what else to do if calling refresh() here is a problem? Perhaps we need to try changing the elements' text content without fully replacing them? (Do you know if there's a reason replaceChildren was used?)

[Tyriar]

replaceChildren is pretty critical to how it works, changing it would probably be a bunch of work. Perhaps in order to keep events we need to do the replace in a queueMicrotask or setTimeout(..., 0)?

[jerch]

replaceChildren is pretty critical to how it works, changing it would probably be a bunch of work. Perhaps in order to keep events we need to do the replace in a queueMicrotask or setTimeout(..., 0)?

Yeah, I think we cannot get rid of replaceChildren at all, as the line content changes shape based on markup and link handling here.

I wonder though, if we could let the event bubble through before the actual content change happens. 🤔

[jtbandes]

I think that would mean waiting until the click event (or mousemove?) to render the new selection. That might work if you are willing to make that change.

Another idea - maybe some well placed pointer-events: none would help to change which element is the event target, so it’s not one of the elements being replaced?

[Tyriar]

Another idea - maybe some well placed pointer-events: none would help to change which element is the event target, so it’s not one of the elements being replaced?

This might work actually, I don't think we depend on any click events in .xterm-rows as that doesn't exist when the webgl addon is used.

[jtbandes]

It seems to work 🙏 🎉 #5249