layershifter / event-stack Goto Github PK

I was hunting down memory leaks in my semantic-ui-react app and I realized that there's a scenario in the EventStack where an event listener can leak and never be released. The specific scenario is when the EventStack has subscribed to two different events.

so given the Dropdown component which looks like this

          {open && <EventStack name='keydown' on={this.closeOnEscape} />}
          {open && <EventStack name='keydown' on={this.moveSelectionOnKeyDown} />}
          {open && <EventStack name='click' on={this.closeOnDocumentClick} />}

this results in an EventStack that has 2 keydown handlers, and a click handler, on unmount, it calls this code

https://github.com/layershifter/event-stack/blob/master/src/lib/EventTarget.ts#L31-L48

It then clears up the keydown handlers first, which reaches this line of code

https://github.com/layershifter/event-stack/blob/master/src/lib/EventTarget.ts#L45-L47

and decides not to release the event listener because the click handler still exists. When the click handler goes away, it removes only the click handler, not the keydown handler, resulting in an event listener leak