Body jumping to the top when you refocus (after losing focus)

[parthdesai93]

Steps for Reproduction

1. Visit lesson 10 of cloning medium guide.
2. Press enter a bunch of time and then scroll down so that top of the screen is out of the viewport. (Basically, till you can't see "tell your story.....")
3. Click anywhere outside the editor area so that editor loses focus.
4. Now click on the sidebar button directly and you can see the document jumping at the top even though it sets the cursor at the correct position.

Expected behavior:
Expect body ( scroll container ) to not jump at the top and set the cursor at the position it was before.

Actual behavior:
Body( scroll container ) jumps at the top but sets the cursor position at the correct range.

Platforms:
Browser: Chrome, Version 66.0.3359.139 (Official Build) (64-bit)
OS: MacOS El Capitan, 10.11.6

Version:

Quill version: 1.3.6

I think i have narrowed down the issue to this part of the code

 restoreFocus() {
    let scrollTop = this.quill.scrollingContainer.scrollTop;
    this.quill.focus();
    this.quill.scrollingContainer.scrollTop = scrollTop;
  }

This behaviour is also reproducible when you use setSelection(index) method.

[dlutwuwei]

Good, the same problem happened in our project, we must make the .ql-editor dom can be scroll, we can not change the style of .ql-editor

[ycjcl868]

same question

[notngan]

This happened to me too when I insert a link into toolbar and press Enter.
After debugging I think it's caused by this line

if (!this.hasFocus()) this.root.focus();

Here is my temporary solution that helps scrolling into the previous selection.

const selectionEl = window.getSelection().focusNode.parentElement
selectionEl.scrollIntoView({ block: 'center', inline: 'center' })

See more scroll options.

Theme:
Bubble

Browsers:
Chrome/76.0.3809.132
Safari/537.36

[mdathersajjad]

Is there any proper way to fix this?

[doanhtu07]

    // Prevent the editor to jump to the top when refocusing

    this.mQuillEditor?.root.addEventListener("blur", () => {
      if (this.mQuillEditor) {
        this.mBodyTop = document.body.getBoundingClientRect().top;
      }
    });

    this.mQuillEditor?.root.addEventListener("focus", () => {
      if (this.mBodyTop === null) {
        return;
      }
      window.scrollTo({
        top: Math.abs(this.mBodyTop)
      });
    });

Notes:
this.mQuillEditor = new Quill(ref, options);
this.mBodyTop is just a storing variable.

I find the solution here: https://github.com/quilljs/quill/issues/855
But I change it up a little so it actually works. At least, it works for me.

Versions:
Quill ^1.3.7
Theme snow
Chrome Version 90.0.4430.212

[quill-bot]

Quill 2.0 has been released (announcement post) with many changes and fixes. If this is still an issue please create a new issue after reviewing our updated Contributing guide 🙏