Working on a side project last night, ran into a fun little unexpected ReactJS behavior. I have a container element (like a <div>) enclosing a form. On the container is a simple onInput event handler which flips a dirty bit to turn on an indicator to show that the form has been changed, needs saving.

Within the form are text inputs (which work fine) and a <select> menu. Select menu won’t change on first update, even though event fires. The second time changing the <select> everything works.

React suppresses some events if it can’t detect that the DOM will be re-rendered. So I assume what happens is that for a <select> menu is that the onInput event handler is triggered before onChange is completed, no DOM change is detected, and onChange is suppressed.

This would be a great place for React to drop a log in the console. oh hai your event was suppressed by a thing, maybe check that