Draft-js: HandleBeforeInput doesn't work when typing in Japanese.

[matiosfree]

HandleBeforeInput doesn't work when typing in Japanese. For other languages (En, Ru) it works fine.

Used DraftJS v.0.7.0, Firefox 48.0.2Chrome 52.0.2743.116, Win7Darwin
In the DraftJS v.0.8.1 also doesn't work.

handleBeforeInput: function (chars) {
    console.log('Checking handleBeforeInput...', chars);
    return true;
},

render() {
        const {editorState} = this.state;
        return (
            <div>
                <Editor
                        editorState={editorState}
                        onChange={this.onChange}
                        handleBeforeInput={this.handleBeforeInput}
                        spellCheck
                        ref="editor"/>
            </div>
        );
    }

[stopachka]

hey @matiosfree

Could you tell us more about what you are trying to do? You have indeed come across a tricky issue -- exposing handleBeforeInput during composition could be tricky, because the DOM is in an uncertain state.

Based on what you're trying to do, maybe we can come up with some solutions.

[matiosfree]

@stopachka When I type in Japanese I need to make some manipulations with the DOM.

I solved it like that:

    $('.DraftEditor-root').on({
        compositionupdate: function(evt) {
            self.handleBeforeInput(evt.originalEvent.data);
        }
    });

but, onChange method doesn't fire for each character. How can I get actual editorState?
this.state.editorState is not suitable for me, because in this state characters are missing.

I want to do like this:

   $('.DraftEditor-root').on({
        compositionupdate: function(evt) {
            let editorState; //?????
            self.handleBeforeInput(evt.originalEvent.data);
            self.onChange(editorState);
        }
    });

[doortts]

This problem also happens with Korean. I think CJK inputs have same problems.

[flarnie]

@matiosfree Thanks for reporting this! Because Japanese, Korean, and other languages use IME for input there are many differences in how Draft handles the input.

I commented on the PR that addresses this - I think it's on the right track and hope we can resolve this issue soon. IME entry is probably the main area where we'd like to improve Draft.js. :)

For what it's worth, you will be able to get the latest editorState as a parameter of handleBeforeInput once we do the next patch release. I don't think that will solve the problem here though. https://github.com/facebook/draft-js/blob/6f2bf66bacff3ffac234fc21ff3720344ff92776/src/component/handlers/edit/editOnBeforeInput.js#L101

[flarnie]

Last week I discussed this with the other maintainers, and we found some issues that will come up with exposing 'handleBeforeInput' during a 'composition'. When a person is entering Chinese, Korean, or other characters with IME input, Draft is building up a "composition" and the DOM is in an uncertain state. We don't want to allow any interruption until the composition is finished.

We would like to provide examples of how to do the same thing using a different approach - and for this it would be helpful to get specific examples of the functionality you need in the editor.

[f0rdream]

Last week I discussed this with the other maintainers, and we found some issues that will come up with exposing 'handleBeforeInput' during a 'composition'. When a person is entering Chinese, Korean, or other characters with IME input, Draft is building up a "composition" and the DOM is in an uncertain state. We don't want to allow any interruption until the composition is finished.

We would like to provide examples of how to do the same thing using a different approach - and for this it would be helpful to get specific examples of the functionality you need in the editor.

Is there any update now (11/6/2018)?

HandleBeforeInput is still not trigged for Chinese with IME input on OSX & Chrome 70

[CatherineJieWang]

Last week I discussed this with the other maintainers, and we found some issues that will come up with exposing 'handleBeforeInput' during a 'composition'. When a person is entering Chinese, Korean, or other characters with IME input, Draft is building up a "composition" and the DOM is in an uncertain state. We don't want to allow any interruption until the composition is finished.

We would like to provide examples of how to do the same thing using a different approach - and for this it would be helpful to get specific examples of the functionality you need in the editor.

The handleBeforeInput still doesn't work when input Chinese and it cannot detect Chinese. Is there any update now(30-05-2019)?

[robbertbrak]

Interestingly, this isn't limited to CJK languages, but happens on Android as well. For example, using Gboard, inserting a @ character is considered to be a composition and therefore doesn't trigger handleBeforeInput. (We use that in our editor to trigger the "mention" functionality)

@flarnie: You said earlier:

We would like to provide examples of how to do the same thing using a different approach

What different approach are you referring to?

[phamvanan]

I fixed it temporarily base on onEditorStateChange event. I check the length in this event, it works well for me.

[evanyeung92]

I fixed it temporarily base on onEditorStateChange event. I check the length in this event, it works well for me.

Hi may I know how did you solve this problem

[ks11singh]

I fixed it temporarily base on onEditorStateChange event. I check the length in this event, it works well for me.

Hi, may i know how did you get editor content at on change.

[CharlesKuncheria]

@robbertbrak For the scenario of using GBoard and adding '@', not calling handleBeforeInput - Did you find any approach to solving this?

[robbertbrak]

@CharlesKuncheria No, unfortunately not. In our own editor, we simply left this as an open issue. Because our editor has a toolbar that includes the @ icon, it's not that much of a problem for us that typing @ in Android doesn't work as expected. Perhaps the earlier suggestion to use the onEditorStateChange event could be a suitable workaround for you?

[CharlesKuncheria]

@robbertbrak Added an issue here. Called out a behavior with Immutable and mutable entity with Android Chrome and GBoard.
Also added the codesandbox link.