When a reference drawer is opened and closed, the onShowDrawer event is executed additively every time a new Drawer is open. This means that event-handlers for drawers that were closed are still being triggered.

Reproduction steps (for developers)

Add a console.log( "calling Drawer.onShowDrawer" ) on line 94 of Drawer.js
Add a console.log( "calling Drawer.onHideDrawer" ) on line 116 of Drawer.js

Expected results

The onShowDrawer and onHideDrawer methods should be called once when the drawer is open, and once when the drawer is closed.

Actual results

The onShowDrawer method is called 3 times on the first open, and 2 additional times on each subsequent open.
The onHideDrawer method is called 9 times on the first close, 25 times on the second close, 49 times on the third close, 81 times on the fourth close…

This behaviour might have something to do with the way the onShowDrawer event is bound inside a setTimeout, and/or the multitude of events being emitted down the entire inheritance chain of Drawer.

Developer notes
Out of frustration I tried removing all event-emitters from Drawer and removing the setTimeout in onShowDrawer. This seems to fix the issue, but breaks the Drawer animation. The root cause of this behaviour is still uncertain.

POC Patch: https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/MobileFrontend/+/485034/

before POC patch	after POC patch