mutate is executing AFTER render cycle completes causing issues with controlled inputs

[catmando]

controlled inputs need to see a re-rerender in the SAME cycle as the change event come in.

When a controlled input renders react checks to see if its current value is the same as the value its being rendered to. If it is it ignores the re-render of the input.

If after a render cycle completes a controlled input does not have the same value as the virtual dom, it its value is set to the virtual dom value.

This prevents the cursor from jumping during rendering, but allows controlled inputs to be controlled by modifying the state variable that is being used as the inputs value.

mutate now waits till AFTER the render cycle completes to do its update. Thus react sees the input change, then there is no render so it figures the input change was ignored on purpose. So its value is reverted to just before the keystroke. Then microseconds later we rerender with the new value. It sees a new value coming in, so it figures it must rerender the input, and the cursor is lost.

So we have to be careful in what cases we wait to mutate. This is going to be tricky because other parts of the system are counting on waiting to avoid a cascading of rerenders.

[catmando]

quick and dirty work around:

    INPUT(value: @Participant.name, placeholder: 'your name', key: 'name')
    .on(:change) { |e| @Participant.name = e.target.value }

add a force_update! :

    INPUT(value: @Participant.name, placeholder: 'your name', key: 'name')
    .on(:change) { |e| @Participant.name = e.target.value; force_update! }

[catmando]

so in react 16 and onwards all state changes inside of events are batched, and executed just before the event handler executes.

So we will add a method that will turn OFF hyperstack state managers batching inside of events.