Accent isn't applied on the letter on text boxes

[samuelsimoes]

This very simple snippet is the basic usage of Fluxo, the connector and React

https://jsfiddle.net/samuelsimoes/q3p44sz1/

Here, If I try to type in the text box some text with an accent the accent simply doesn't go to the letter that it should be applied. This is happening in Chrome/Firefox/Safari through Mac OS (international keyboard layout).

Doing some tests on the connector in order to find the problem, if I remove the "next tick batching" logic from the connector the things works properly, so looks that we have a problem on this. 😔

[samuelsimoes]

React definitely doesn't like setState deferred (look: facebook/react#6563 and https://jsfiddle.net/samuelsimoes/q3p44sz1/) and for inputs we are now with the hands tied 😭

If we remove the connector's events batching the interface performance may suffer a lot with the successive intermediate renders, example: an attribute that has two dependents computed properties, if you change this attribute the interface will do 3 renders, now, imagine this scenario with a collection on a complex UI... 💀

I searched a lot some solution to this, but right now I'm run out of ideas.

The current workaround that I'm using to solve this issue is to use a component like this https://github.com/samuelsimoes/todomvc-fluxo/blob/master/src/components/smart_input.js that allows me to use onBlur in a more easy way, so the action to update the value is only called on onBlur instead of invoking the actions on each keystroke, but it is a bad solution because if we need "realtime" updates on key press the connector on MacOS with accents won't work. 😢

[samuelsimoes]

What is happening:

Let's suppose that you press the letter A.

1. When you trigger the onChange in the field, React processes all the state mutations.
2. After the state mutation process, React does the diff to update the component and at this stage the state key of this field is an empty value, so React does a node.value = "".
3. On the next tick our deferred setState is triggered applying the letter A again.

With this node.value changes the browsers on MacOS can't handle correctly with the accents on the "intermediate state".