Fix issue with unnecessary editor focus on mount

[jetzhou]

dangerouslyPasteHTML will always grab editor focus, which is not necessarily desired all the time. This simply moves up the logic without the focus part.

[alexkrolick]

Does this require a semver bump for the Quill dependency?

[pushred]

It looks like the behavior that causes dangerouslyPasteHTML to grab focus was introduced in quill@1.3.5, released 7 days ago. setSelection is called now, which is likely the root cause here.

Switching to setContents seems safe but it's troubling that quill introduced a breaking change in a patch release. Pinning or installing quill as a peer dependency would be nice.

[FrankYouGithub]

@alexkrolick When can you fix this bug, please push a new version

[alexkrolick]

Does #312/v1.2.4 fix this problem as well?

[lee813]

I just updated to 1.2.4, But seems the problem is still there

[FrankYouGithub]

I updated to 1.2.4 , but this problem is still there @alexkrolick, I think #321 fix this problem as well

[alexkrolick]

clipboard.convert is not documented as a public API, but we can see about using it as an alternative to dangerouslyPasteHTML. See slab/quill@36b7b45#commitcomment-27736778

[wmdmark]

@alexkrolick it looks like a fix for this was merged but with no version bump (unless I'm missing something)? Still 1.2.4 which has the same focus behavior issue.

[travist]

I fixed this by not calling dangerouslyPasteHTML within my application, but replaced the following

editor.dangerouslyPasteHTML(html);

... with the following.

editor.setContents(editor.clipboard.convert(html));

[bamunusingha]

I have the same issue with angular 5. Can someone please explain how to solve the issue with angular 5 ?

[CharlBest]

@bamunusingha could you fix this somehow because I'm still getting this error in Angular 6

[asthanarht]

I am also getting error in angular 5. Did you guys fix this issue?

[CharlBest]

This is currently my dirty hack in Angular (Typescript). After you call editor.clipboard.dangerouslyPasteHTML add this snippet:

if (document.activeElement) { (<any>document.activeElement).blur(); window.scrollTo(0, 0); }

Reference: https://github.com/CharlBest/nean-stack-starter/blob/3647d2cb1d5026d4b35a19f7ea89e27002ff4983/src/client/app/shared/html-editor/html-editor/html-editor.component.ts#L75

[inartin]

.setContents(editor.clipboard.convert(html));

This helped, thanks a lot ! 👍

[marinona]

I'm using React and I had problems with react-quill editor focusing when it was not supposed to.
The problem was that I had dependencies in the function that generates the modules prop. This dependencies made this object to be re rendered too many times and that is what made the weird focus behavior.

Using useMemo and useCallback hooks properly was the key in order to control unnecessary renders.

React v.16.13.1
react-quill v1.3.5

Hope this helps someone!

[theindianappguy]

@marinona i am using useMemo as you suggested in other comment as well but still facing this issue?

[marinona]

Hi @theindianappguy !
I'm using de mentions module, and this is how I do it. I hope it helps!

• handleAddItem and fetchDebouncedMentions definitions are wrapped into their own useCallback()

• modules is defined outside the component function:

const modules = (handleAddItem, fetchDebouncedMentions) => ({
    toolbar: [["bold", "italic", "underline"]],
    clipboard: {
        matchVisual: false,
    },
    mention: {
        allowedChars: /^.*$/,
        mentionDenotationChars: mentionData.map(md => md.prefix),
        source: (searchTerm, renderList, mentionChar) => fetchDebouncedMentions(searchTerm, renderList, mentionChar),
        onSelect: (item, insertItem) => {
            handleAddItem(item);
            insertItem(item);
        },
        renderItem: (item, searchTerm) => getHighlightedComponent(item.display_dropdown, searchTerm, true),
        isolateCharacter: true,
    },
});

• Inside the component function:

const memoizedValue = useMemo(() => modules(handleAddItem, fetchDebouncedMentions), [
        handleAddItem,
        fetchDebouncedMentions,
    ]);

• Component function return:

 <ReactQuill
                onChange={onChange}
                value={value}
                modules={memoizedValue}
               [...]
            />