Cannot enter Chinese on textbox by React + Reflux actions

[compulim]

Tested on Chrome/Edge on Windows 10, Chrome on Mac, and Mobile Safari on iOS. It fail on all of them.

On iOS, it also fail with handwriting-based IME.

This is probably because Reflux action trigger is async (setTimeout/nextTick).

Code used to setup the page:

'use strict';

var Actions = Reflux.createActions(['setText']),
    store = Reflux.createStore({
        listenables: [Actions],
        init: function () {
            this._text = '';
        },
        getText: function () {
            return this._text;
        },
        onSetText: function (newText) {
            this._text = newText;
            this.trigger('text');
        }
    }),
    Page = React.createClass({
        mixins: [Reflux.listenTo(store, 'onStoreChange')],
        onStoreChange: function () {
            this.setState({ refluxText: store.getText() });
        },
        getInitialState: function () {
            return {
                htmlText: '',
                refluxText: store.getText()
            };
        },
        onHTMLChange: function (evt) {
            this.setState({ htmlText: evt.target.value });
        },
        onRefluxChange: function (evt) {
            Actions.setText(evt.target.value);
        },
        render: function () {
            var {state} = this;

            return (
                <div>
                    <div>Textbox by setState only</div>
                    <input type="text"
                           onChange={this.onHTMLChange}
                           value={state.htmlText} />
                    <div>Textbox by setState via Reflux action</div>
                    <input type="text"
                           onChange={this.onRefluxChange}
                           value={state.refluxText} />
                    <div>this.state</div>
                    <pre>{JSON.stringify(state)}</pre>
                </div>
            );
        }
    });

React.render(<Page />, document.getElementById('page'));

[spoike]

You can set actions to not defer with e.g. Reflux.createAction({sync: true});

[compulim]

Can we set {sync: true} on a per action basis? Like,

Reflux.createActions({
  changeText: { sync: true }
})

[CrisLi]

@compulim I have the same request.

[spoike]

@compulim Yes, you should be able since 0.2.12. See also #391.

[spoike]

Note to self: I'll have to rewrite the README/docs to make this more clearer.

[compulim]

Thanks for clarification.