Draft JS not registering IME input

  dom, draftjs, input, javascript, reactjs

While working on my app I noticed that Korean inputs are not registered until a non-Korean input(space, arrow keys, return, a mouse click) are made. I tested this with a simple console.log in componentDidUpdate, which returns false until said non-Korean inputs.

componentDidUpdate() {
const test = this.props.editorState.getCurrentContent();
console.log(test.hasText());
}

A functionality of my app requires that when a user presses ‘return’, draft detects whether or not there is text in the current block for it to work properly. Currently it’s a simple if statement inside handleReturn:

const block = editorState.getCurrentContent();
if(!block.hasText()) { 
    do something 
} else { do something else }

In order to get draft to recognize that inputs have been made, so far I’ve tried:

  1. Simulating a keypress(like a right arrow key) programmatically right after the user presses ‘return’ in order to register the Korean input. However, chrome doesn’t allow user initiated events because it’s not trusted.
  2. initiating other commands by calling handleKeyCommand at the top of handleReturn(like undo-ing and redo-ing, calling setState, etc), but none of them work because it simply negates whatever Korean input has been made because it hasn’t been registered either way.
  3. I’ve looked at DraftEditorCompositionHandler and did research on IME(composition mode) to see if there was a way to force draft to resolve the composition, or to force compositionend, but honestly it’s way above my knowledge, experience or skill level (I’m fairly new to React in general)

I did a bit of research and I know draft has issues with other languages as well and it has something to do with IME inputs.

I’ve been stuck with problem for days and I’d love some suggestions on how this could be overcome.

Source: Ask Javascript Questions

LEAVE A COMMENT