A workaround for the ‘disappearing input content’ issue in IE11 with React/Redux
So you’re pushing new technologies in your company. You’ve got webpack, react, redux, and starry eyed optimism. However, there’s one big, massive, Microsoft-authored cloud on the horizon: good ol’ IE.
If you work on internal systems (like I am at the moment) you’ll be no stranger to the irritation of IE just not behaving correctly in certain situation when introducing React/Redux to the mix. However, this issue, the one of ‘disappearing input’ is definitely the worst I’ve encountered so far.
If you’re not having this issue yourself, and just want to understand the pain, the situation is as follows: IE11 does some things in a strange way when it comes to DOM events (a shock, I know). This has some minor irritations associated with it, but mostly doesn’t get in the way. That is, except for (at least) one major use case: Pasting text into a free text input (textarea or standard text inputs) using the right click context menu.
IE11 doesn’t copy the clipboard text into the input in quite the same way that React is designed to handle, as a result the React event dispatched by the paste will not contain the ‘pasted’ information. Therefore, if you’re storing this information anywhere else (such as Redux), that store will not be updated. Always fun!
Now, the great thing about redux is that it makes data flow super simple. It flows one way; from the store down to the components, then back up again. Unfortunately, the store doesn’t have the correct data in it as we’ve not dispatched the data yet. Therefore, if anything else except an event on the input itself causes the component to update (say, for example, debounced validation), the pasted text disappears as the new props from mapStateToProps flow in, containing the pre-pasting data.
Thankfully, not all is lost. The pasted clipboard information is still present on the input element itself, even if React event doesn’t contain it. Therefore, using the component ref callback:
You’ll be able to gain access to the input node itself. The trick then is to dispatch the value obtained in this fashion, rather than the value provided by the triggered event.
Of course, the trouble is going to be figuring out exactly when to perform this update. In my case, the cause of the disappearing text was due to the aforementioned debounced validation. So all I had to do was perform the above dispatch just before I dispatched my validation result.
Incidentally, this fix also addresses an issue where IE11 would also fail to trigger a React update as the validation functionality kicked in, as the validation would always ensure the store is updated before triggering. So if you’re also seeing that issue, please give this fix a try!
Then, in the meantime, keep trying to get convince your internal users to move up to Chrome!