Bug Description

The last clicked ui5-button is held under a top-level activeButton reference that doesn't get cleared even when the button is unmounted. This reference can leak the DOM node & other things (data, other DOM nodes, potentially of itself & parent/children) that it holds until another ui5-button is clicked.

Affected Component

ui5-button

Expected Behaviour

Once a ui5-button is removed from the DOM, its reference should not need to be held.

Isolated Example

https://stackblitz.com/edit/js-2gxu393t?file=index.js

Steps to Reproduce

1. Click a ui5-button to e.g. open a dialog
2. Click another ui5-button within the dialog to e.g. unmount and remove the dialog
3. Either observe the value of activeButton with a debug point here by clicking anywhere on the page, or looking for lingering objects in the heap snapshot.

In the example, open the dialog with the "Open Dialog" button. The "cancel" button in the dialog has attached to it a big array. After closing it and removing the dialog from the DOM, that memory still exists until you click on "Does Nothing" (and perform a GC), which assigns activeButton to something else and not the dialog. Observe the memory drops from ~400MB to ~20MB after doing this.

This example is a bit contrived but demonstrates what I observe in my use case. For example, when using it with ui5-webcomponents-react, closing & destroying the dialog by clicking on a ui5-button holds onto the DOM reference, which in turn references React internals that can traverse through all the parents/children and associated props (at least on React 17). This can potentially leak a lot of memory until another ui5-button is clicked.

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.20.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.