Блог

Мы используем DraftJS для создания полнотекстового сообщения / комментария с упоминанием пользователя (draft-js-mention-plugin) и функциональностью хэштега (draft-js-hashtag-plugin). Ниже приведен пример кода.

 <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>
  

Это отлично работает в настольных веб-браузерах. Теперь мы пытаемся поддерживать и мобильную платформу. Мы сталкиваемся со следующими двумя проблемами в Android Chrome:

1. всякий раз, когда я набираю пробел после слова, клавиатура закрывается.

2. очистка упоминания или тега полностью выводит из строя наше приложение со следующей ошибкой

   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)
    .....
     

   Вышеуказанная ошибка произошла в одном из ваших компонентов React:

     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)
    ....
     

Приветствуется любая помощь или руководство.
Протестировал его с помощью Android Chrome и Google Keyboard.