Firing the blur event when a component unmounts
If an input is focused and a React component containing that input unmounts, then the blur event for that input will not fire. If you use the blur event to save the contents of the input then you are in trouble.
You can know what input/select on the page currently has the focus with document.activeElement. Combine that with the component lifecycle method componentWillUnmount() to fire blur for the currently focused element on unmount.
componentWillUnmount() {
const input = document.activeElement()
input.blur()
}
The documentation for activeElement says it may return <body> or null when there is no active element, so you need to protect against that.
componentWillUnmount() {
const input = document.activeElement()
if (input) {
input.blur()
}
}