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