Bug - SelectToggle - Event leak on componentWillUnmount #9304
Description
Describe the problem
SelectToggle in v4 is not using removeEventListener correctly, causing an event leak:
console.error
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
at Select (<path-to-project>\node_modules\@patternfly\react-core\dist\js\components\Select\Select.js:34:9)
(...)
The bug is in this code:
componentDidMount() {
document.addEventListener('click', this.onDocClick, { capture: true });
document.addEventListener('touchstart', this.onDocClick);
document.addEventListener('keydown', this.handleGlobalKeys);
}
componentWillUnmount() {
document.removeEventListener('click', this.onDocClick);
document.removeEventListener('touchstart', this.onDocClick);
document.removeEventListener('keydown', this.handleGlobalKeys);
}
The removeEventListener call of click should also have the { capture: true } options object so the event listener is correctly removed. This code does not seem to be present in v5 so I assume this bug is fixed there.
How do you reproduce the problem?
I can reproduce this in my enterprise product while running tests but can't provide the code. If really needed I can try to provide a repro project. The scenario is simple, I render a Select, unmount it and then click a button in the DOM. This causes the warning above.
Expected behavior
Event listeners should be removed correctly when a Select is unmounted from the DOM so clicks in other elements in the DOM would not throw react warnings.
Is this issue blocking you?
No
What is your environment?
- OS: Windows 10 Enterprise
- Jest: 29.5.0
- jsdom: 20.0.3
- React 17.0.2
- React DOM: 17.0.2
- @patternfly/react-core: 4.276.8
Metadata
Metadata
Assignees
Labels
Type
Projects
Status