Facing issues with Draft JS in android browsers

850 views Asked by At

We are using draftJS for creating a rich text post/comment with user mention(draft-js-mention-plugin), and hashtag(draft-js-hashtag-plugin) functionality. Following is the code sample.

<FieldContainer
  containerStyles={this.props.containerStyles}
  editorStyles={this.props.editorStyles}
  placeholderStyles={this.props.placeholderStyles}
  height={this.props.height}
  onClick={this.focus}
>
  <Editor
    editorState={this.props.editorState}
    onChange={this.onChange}
    plugins={this.plugins}
    placeholder={this.props.placeholder}
    ref={element => { this.editor = element;} }
    onfocus={this.props.handleFocus}
    onBlur={this.props.handleBlur}
    handleKeyCommand={this.handleKeyCommand}
    keyBindingFn={e => myKeyBindingFn(e, this.props.allowNewLine)}
    readOnly={this.props.readOnly}
    autoCapitalize={'none'}
    autoComplete={'off'}
    autoCorrect={'off'}
    spellCheck={false}
  />
</PostFieldContainer>

This is working fine in desktop web browsers. Now we are trying to support mobile platform as well. We are facing following two issues in android chrome:

  1. whenever I type space after a word, the keyboard is getting closed.

  2. clearing a mention or tag completely breaks down our app with following error

    Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

     at removeChild (https://192.168.1.9:3000/static/js/1.chunk.js:253583:22)
     at unmountHostComponents (https://192.168.1.9:3000/static/js/1.chunk.js:264847:13)
     at commitDeletion (https://192.168.1.9:3000/static/js/1.chunk.js:264915:9)
     at commitMutationEffects (https://192.168.1.9:3000/static/js/1.chunk.js:267143:15)
     .....
    

    The above error occurred in one of your React components:

     in div (created by DraftEditorBlock)
     in DraftEditorBlock (created by DraftEditorContents)
     in div (created by DraftEditorContents)
     in div (created by DraftEditorContents)
     in DraftEditorContents (created by DraftEditor)
     in div (created by DraftEditor)
     in div (created by DraftEditor)
     in div (created by DraftEditor)
     in DraftEditor (created by PluginEditor)
     in PluginEditor (at PostField/index.js:363)
     ....
    

Any help or guidance is appreciated. Tested it using android chrome and google keyboard.

0

There are 0 answers