onChange Input Focus for Multiple Inputs with Image Handler

[hariria]

Problem -- related to #169 (Image Handler and input focus)

Thanks again so much for your work on react-quill. This is some pretty remarkable stuff so keep up the good work.

I was following a different suggestion provided in issues #169 and recently ran into an issue where I was trying to add an image handler to embed images instead of uploading as a URL. I have another input box and for some reason, now whenever I add text to that input, it automatically changes the cursor to focus on ReactQuill. Seems extremely strange. If you could help me out I would really appreciate it!

ie. I'll start typing in the normal input and out of no where, my cursor will change focus so that I'm now typing in ReactQuill

Codesandbox Demonstration:

https://codesandbox.io/embed/confident-gagarin-qts90?fontsize=14

Code (for Reference)

import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
import ReactQuill from "react-quill"; // ES6
import hljs from "highlight.js";
import "highlight.js/styles/darcula.css";
import "react-quill/dist/quill.bubble.css";

import "./styles.css";

hljs.configure({
  languages: ["javascript", "java", "python", "c++"]
});

const formats = [  "header", "bold", "italic", "underline", "strike", "blockquote", "list", "bullet"  "indent", "code-block", "image"];

function App() {
  let quillRef = useRef();

  const [title, setTitle] = useState("");

  const imageHandler = (image, callback) => {
    var value = prompt("What is the image URL");
    if (value) {
      console.log(quillRef);
      quillRef.getEditor().insertEmbed(quillRef.getEditor().getSelection().index,"image", value,"user");
    }
  };

  const modules = {
    syntax: {
      highlight: text => hljs.highlightAuto(text).value
    },
    toolbar: {
      container: [
        [{ header: [1, 2, false] }],
        ["bold", "italic", "underline", "strike", "blockquote"],
        [ { list: "ordered" }, { list: "bullet" },  { indent: "-1" }, { indent: "+1" }],
        ["clean"], ["code-block"],
        ["image"]
      ],
      handlers: {
        image: imageHandler
      }
    }
  };

  return (
    <div className="App">
      <input  id="first-input" value={title}  onChange={event => { setTitle(event.target.value); }}  />
      <ReactQuill  
        id="react-quill" 
        theme="bubble"  
        ref={el => { quillRef = el; }}
        placeholder={"Start typing..."}
        modules={modules}
        formats={formats}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[joefradley]

Could be related to this issue. There's an open PR to resolve it if you wanted to test.

[hariria]

Thanks, @jfradley how would I npm install your forked version?

[hariria]

Ok, I just went into my node_modules and made the following edits in src/component.js according to the PR and it seemed to work fine without me having to rebuild:

src/component.js - line 206

var QuillComponent = createClass({
		// Restore editor from Quill's native formats in regeneration scenario
		if (this.quillDelta) {
			this.editor.setContents(this.quillDelta);
			this.editor.setSelection(this.quillSelection);		
			this.editor.focus();
			this.quillDelta = this.quillSelection = null;
			if (this.quillSelection) {
				this.editor.setSelection(this.quillSelection);
			}
			if (this.quillHasFocus) {
				this.editor.focus();
			}
			this.quillDelta = this.quillSelection = this.quillHasFocus = null;
			return;
		}
		if (this.state.value) {

src/component.js - line 321

var QuillComponent = createClass({
		// Cache selection and contents in Quill's native format to be restored later
		this.quillDelta = this.editor.getContents();
		this.quillSelection = this.editor.getSelection();
		this.quillHasFocus = this.editor.hasFocus();
		this.setState({
			generation: this.state.generation + 1,
		});

If the contributors could merge this PR I would really appreciate it. It's a pretty important and necessary change. I did notice that there was a slight bit of lag when I typed in my input box, but it's much better than before. Thanks @jfradley

@zenoamaro (maintainer) @alexkrolick (maintainer) @clemmy @asiniy @webcarrot @druti @e-jigsaw @zhang-z @Sajam

[theodesp]

I just experienced the same issue suddenly. I have an input text above a ReactQuill component and when I type the imput the cursor gets focused on the editor instead. I dont have an image handler though:

<ReactQuill
          className={classnames('editor-content-area', {
            invalid: bodyState && !bodyState.valid,
            pristine: bodyState && bodyState.pristine,
          })}
          defaultValue={''}
          value={body}
          theme={null}
          modules={{
            toolbar: {
              container: '#toolbar',
            },
          }}
          children={<div data-quill-editor={true}/>}
          formats={[
            'bold', 'italic', /*'underline',*/ 'list', 'bullet', 'indent'
          ]}
          onFocus={handleBodyFocus}
          onChange={handleBodyChange}
          {...restProps}
        />

[hariria]

@theodesp yeah it seems like a pretty big issue. I'm not sure why it keeps on changing focus but it definitely needs to be fixed.

I made the change above in the react-quill component.js but there was an extremely long amount of lag. The lag increases the more inputs you have. For example, I have 10 inputs on my page and every time I type a character, it causes 10 more warnings. It seems to be looping through each input to check if the character is supposed to belong to that input? Here's the warning I'm getting:

[Violation] Added synchronous DOM mutation listener to a <some> event. Consider using MutationObserver to make the page more responsive.

[zehawki]

I had the same issue after adding imageHandler. Drove me nuts for a while, so I tried various things and here's what I'm using successfully:

The modules json is assigned as a state variable (in constructor) and then in ReactQuill I use modules={this.state.modules}, and this solved the issue. Note that I'm using class components.

[chetansgit]

Please refer to this link:

https://stackoverflow.com/questions/59825450/react-quill-custom-image-handler-module-causing-typing-issues-with-the-editor

[SanayRaj]

It's simple, Just make a new React Component file and make the quill things in it. and also make that component as a React.PureComponent or use memo(*Your Component name goes here*) hook

[Sukriti-sood]

I am facing same problem of cursor change, Is it solved now ? Or any solution