When i add the handlers method to the react quill, the edit box always auto blur when i input a letter.

[z-lionel]

When i add the handlers method to the react quill, the edit box always auto blur when i input a letter. how can i fix it?

I want to add custom properties for the link like this: < a href=" " data-custom="custom properties">data</ a>

it means i have to custome the handlers link? because i can't find any api to do this thing.

[vidimitrov]

I also experience the same and I was wondering if I am doing something wrong, but it looks like it comes from the ReactQuill component...

@zenoamaro any ideas?

[SooJungChae]

I have same issue get an error Error: The given range isn't in document in browser console. And fix this wrapping with useMemo function. reference: https://github.com/quilljs/quill/issues/1940

  const modules = useMemo(() => {
      toolbar: {
        handlers: {
          image: imageHandler,
        },
        container: [
          [{ header: [1, 2, false] }],
          ['bold', 'italic', 'underline', 'strike', 'blockquote'],
          [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
          ['link', 'image'],
          ['clean'],
        ],
      },
      clipboard: {
        matchVisual: false,
      },
    };
  }, []);

<ReactQuill
      theme="snow"
      id={'quill'}
      style={{ marginBottom: '10px' }}
      modules={modules}
      value={content}
      onChange={onChangeContent}
      ref={quillRef}
    />

[bengotow]

Yep running in to this as well - it seems typing the first character into an empty ReactQuill editor with the value/onChange set to use strings (vs deltas) causes it to blur. Trying to work around this, will let y'all know if I come up with anything!

[joeyparis]

Also experiencing the same problem will let you know if I find anything out too!

[codefist]

my workaround, although after a couple hours of working with Quill I have concluded that it is intrinsically incompatible with React as the project exists currently. I am abandoning quill in favor of my own equivalent. this work-around I started with was only the tip of the iceberg of much deeper problems with this project.

[dieng01]

I have the same problem: I using this library (use-debounce) to resolve it:

const debounced = useDebouncedCallback((value: string) => { setEditorHtml(value) }, 500)

//use the useMemo to prevent rerendering const modules = useMemo( () => ({ toolbar: { container: [...], handlers: { image: imageHandler, }, }, }),[])

<ReactQuill ref={quill} defaultValue={""} onChange={(e) => debounced(e)} modules={modules} />

[pavi2410]

Same issue. https://github.com/zenoamaro/react-quill/issues/688#issuecomment-793441268 worked for me

[SimonProper]

Using useMemo worked for me as well, however the brackets and parentheses in https://github.com/zenoamaro/react-quill/issues/688#issuecomment-793441268 is not correct. This is what worked for me:

const modules = useMemo(() => ({
      toolbar: {
        handlers: { image: imageHandler,},
        container: [
          [{ header: [1, 2, false] }],
          ["bold", "italic", "underline", "strike", "blockquote"],
          [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
          ["link", "image"],
          ["clean"],
        ],
      },
      clipboard: {
        matchVisual: false,
      },
    }),[]);