Keyboard Input isn't processed properly on Android, but on iOS and Desktop

[natterstefan]

Bug - Keyboard Input isn't processed properly on Android, but on iOS and Desktop

I have the following two issues:

• Issue 1: when the last paragraph of the imported (html, not delta) content is <strong>Bold</strong> I can only add 1 char in the next line. Then the editor looses its focus ==> .gif Example (droplr). Btw, it works if I switch the bold and not-bold text (.gif Example)
• Issue 2: when there are two paragraphs, and the first one (also imported html) has the same setting, I can add a new line, but the second char-input jumps into the next line. ==> .gif Example (droplr)

Codepen

• Issue 1: https://codepen.io/natterstefan/pen/veqOab
• Issue 2: https://codepen.io/natterstefan/pen/MEMamV
• Working Quill.js (no React Component) Example: https://codepen.io/natterstefan/pen/pWXjmO

Devices

• iOS: it works without issues on my iPhone 6S Plus
• Android: it does not work (eg. on Nexus 5X, or Pixel via Android Emulator)

FAQ

How do I access the wrapped Quill instance?

In the provided examples (eg. Codepen) I do not access it, just "listen" to the onChange and get its value there.

In our project we access it like this (abstract example):

 constructor(props, context) {
    super(props, context)
    this.quillRef = null      // Quill instance
    this.reactQuillRef = null // ReactQuill component
  }

 componentDidMount() {
    this.attachQuillRefs()
  }
  componentDidUpdate() {
    this.attachQuillRefs()
  }

  attachQuillRefs = () => {
    if (!this.reactQuillRef || typeof this.reactQuillRef.getEditor !== 'function') return
    this.quillRef = this.reactQuillRef.getEditor()
  }

  onChange() {
    // example
    console.log('onChange:', this.quillRef.getContents())
  }

 <ReactQuill
   ...props
   ref={(el) => { this.reactQuillRef = el }}
 />

Is there a bug in Quill?

Not sure yet, but I will test it, gonna add an Issue there too (if necessary) and link it here afterwards. In the meantime please check out my Codepens plase.

Update: I did not found a bug on their side. See the working Codepen (w/ Quilljs only) here.

React-Quill version

• 1.1.0

[alexkrolick]

I can fix your first example by removing the inner div:

- <div 
-   key="editor"                     
-   ref="editor"
-   className="quill-contents"                     
- />

https://codepen.io/alexkrolick/pen/YEExeQ?editors=0010

Ultimately I think this is due to the .ql-cursor placeholder that gets inserted to preserve format across paragraph breaks interacting with the ReactDOM.clone and/or dangerouslyPasteHTML operations. Here is a related issue upstream: quilljs/quill#1682

react-quill/src/component.js

Lines 339 to 345 in 2deb9ee

	var customElement = React.Children.count(children)
	? React.Children.only(children)
	: null;
	var editingArea = customElement
	? React.cloneElement(customElement, properties)
	: DOM.div(properties);

[natterstefan]

@alexkrolick thanks for your help and answer. At least the first issue should be resolved, I need to test it in our environment again.