Password field causes memory leak in production builds #12420
Description
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
We're noticing that password-type input fields (as well as their wrapping parents) remain as detached DOM elements when conditionally being rendered and removed from the DOM.
This issue seems to be occurring across several applications using React 16, include a newly created app from Create React App, and we're able to produce Chrome memory heap snapshots in all of these environments to demonstrate this issue.
Observe in the following example, the button adds/removes the input field to the DOM. To reproduce the problem stated in this issue, repeatedly click this button (say 20-30 times), then take a memory heap snapshot. You will see multiple detached DOM elements, the password input field and its wrapping div. Note that this issue does not happen for other types of input fields.
class App extends Component {
state = { show: false };
toggle = () => this.setState({show: !this.state.show})
render() {
return (
<div>
<button onClick={this.toggle}>Toggle password field</button>
{this.state.show && (
<div>
<input type="password"/>
</div>
)}
</div>
);
}
}
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
We have tried this issue in React 16.2, 16.1 and React 15.6. Chrome and Canary were the browsers tested in particular.