Scrolling in interactive terminal UI (FAR Manager)

[jherman]

When using a console UI tool like FAR Manager, scrolling seems to throw a Unable to preventDefault inside passive event listener invocation.. I can scroll without errors when I'm not in this terminal UI.

I've seen a few other cases/fixes surrounding this but none seem to address this in particular:

#2931
#3004
#3110

I've tried altering xterm.js code to remove the preventDefault in the wheel scroll, and that does seem to stop it, however it then tosses the error when I'm out of the terminal UI.

The line that errors:

xterm.js/src/browser/Terminal.ts

Line 702 in 80d4742

ev.preventDefault();

Details

• Browser and browser version: Chrome Version 94.0.4606.81 (Official Build) (64-bit)
• OS version: Microsoft Windows 10 Enterprise Release [2009] Version 21H1
• xterm.js version: xterm 4.14.1

Steps to reproduce

1. Setup a basic connection to a PTY session
2. Start a UI that has scrolling like FAR manager

See image:

[jerch]

Can you set logLevel to 'debug' and post the console log here (during startup of the app)? Esp. look for an entry like:

xterm.js: Binding to mouse events: 
{down: true, up: true, drag: true, move: false, wheel: true}

[Tyriar]

The wheel event handler is marked explicitly as not passive 🤔

xterm.js/src/browser/Terminal.ts

Line 745 in 9c49b31

el.addEventListener('wheel', eventListeners.wheel, { passive: false });

A stack trace would also help here as it might tell us where the function is being called from

[jherman]

@jerch

Here is the log after setting xterm log to debug with the following:

    this.terminal = new Terminal({
      logLevel: 'debug',
      cursorBlink: true,
      fontFamily: 'consolas',
      screenReaderMode: true,
      cols: 128,
      windowsMode: true
    });

The logs produced:

xterm.js:1 xterm.js: Unbinding from mouse events.
xterm.js:1 xterm.js: parsing data �[0m�[0K
xterm.js:1 xterm.js: parsing data �]0;Administrator:  �Windows PowerShell�[0K�[?25l
Copyright (C) Microsoft Corporation. All rights reserved.�[0K
�[0K
Try the new cross-platform PowerShell https://aka.ms/pscore6�[0K
�[0K
�[0K�[?25h
xterm.js:1 xterm.js: parsing data PS C:\repos\work\github.com\jherman\socket-io-test>�[0K�[53G

After opening far.exe this immediately got produced in the (filtered) logs:

After exiting far.exe I immediately see:

xterm.js:1 xterm.js: Unbinding from mouse events.

@Tyriar The best I could produce for a stack trace is using the minified file:

Clicking the link to the source took me to this portion:

Pretty Print:

I deduced this to the source code I posted above.

But yes, I agree, I saw that the wheel event handler is marked as not passive, and read about that in those other cases, which also has me baffled.

If there is something else I can provide, please let me know.

[Tyriar]

@jherman thanks for the info! What are you calling in zone.js:406? I was expecting the end of the stack trace in xterm.js here.

[jherman]

@Tyriar
Here is where zone.js:406 takes me:

As an FYI my app is using Angular 12 framework. I don't explicitly call this myself.

[Tyriar]

Yeah I'm pretty puzzled on this, @jerch have you been able to reproduce? I know I had problems in the past even trying to get the warning to show in my browser when passive: false was not included, thought maybe related to browser version/flags or something.

[jerch]

@Tyriar Nope cannot repro with mc under ubuntu on master, thats why I was asking for the events the app registers. There is one thing weird - the app seems to register the mouse events multiple times (@jherman can you confirm, that you saw those "Binding to mouse events" multiple times in a row for just one app start?) - there might be a race condition hidden here. Still it should not happen at all due to the passive: false flag. Really strange.

[jherman]

@jerch It does appear to register the bind 3 times when launching far.exe (as a side note, I'm not sure how it even detects that I ran far.exe, but I'm assuming it's listening for scroll support from far.exe). But here is a video of me opening far.exe and it logging the binds (I use a filter to keep the noise down). I even take a peek into the EventListeners to show passive: false.

2021-10-20_10h35_16.mp4

[jerch]

Thx for your detail replay.

What comes to my mind - is angular faking events by any chance? Like they catch and stop them, and later re-enter them from newly created ones? Thats just a wild guess for now, but the fact that your logs clearly show the events as passive: false while this still happens does not fit at all. Those events with passive: true have to come from somewhere.

Can you catch the event obj itself, when the error happens?

[jherman]

@jerch Modified the minified xterm.js to include debugger;, and I hit the breakpoint. Are you interested in the WheelEvent object?

[jerch]

Sorry it gets quite debug-hacky now. Can you bind the original event object, (where it still shows passive: true for the handler), to some temp global var and check in the debugger, if it is still the same object as the one on the stack causing the exception? (You can test obj identity with ===.)

And if thats still the same - can you check the list of event listeners as well with obj identity? (For that you gonna need to track the function pointers, not sure if thats feasible from devtools alone without source modifications.)

Currently my guess goes into this direction - maybe angular is very opinionated about certain event listeners, thus might remove and re-attch things for their own "lifecycling", but without the passive flag. Or they shim the default register API with their own abstraction, to get their handlers through on top (idk, I literally know nothing about angular).

[jherman]

@jerch Before I take those steps, let me write up a quick plain old index.html with xtermjs that'll talk to my websocket server and see if that corrects it. That'll at least tell me if it is Angular, and it's not xterm's problem. I'll let you know what I find out.

[jherman]

@jerch looks like Angular has something to do with it. I removed it, and xterm works without errors now. Now looking to hunt down what Angular does that seems to be overriding it. It appears Angular should be, by default, use passive: false from my understanding. A lot of folks looking for ways to tell Angular to use passive: true:

angular/angular#8866

https://angular.io/guide/event-binding#binding-to-passive-events

Thanks @jerch & @Tyriar for your help.

[jherman]

@jerch & @Tyriar Just to follow up. I read some posts mentioning just replace e.preventDefault() with e.stopPropagation(). Well I tried this in xterm.js and it does seem to relieve the issue in and out of far.exe. Of course I don't know if this will have residual effects on my app. Obviously I don't know if this worth considering since you are both maintainers of the source.