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:
whenever I type space after a word, the keyboard is getting closed.
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.