React-quill: Window is scrolled to top after paste

[finom]

To reproduce,

1. Open the example: https://codepen.io/finom/pen/QBBzgG
2. Scroll to bottom.
3. Press Ctrl + V (or CMD + V).

This problem doesn't allow to use the editor for lots of content and isn't reproducible at pure Quill.

React-Quill version

• [x] 1.4.0-beta.2
• [x] 1.3.6

[alexkrolick]

This might have to do with how focus events are handled

[Ciberusps]

Any solution?

[ycjcl868]

me too.

1. tooltip click will scrollTop
2. paste scrollTop

@alexkrolick How to deal with the bug?

[TinaTseng]

Same here. Looking forward to a solution.

[ycjcl868]

My temp solution:

// Clipboard.js
public onPaste(e) {
    if (e.defaultPrevented || !this.quill.isEnabled()) return;
    const range = this.quill.getSelection();
    let delta = new Delta().retain(range.index);
    let scrollTop = 0;
+   const container = document.querySelector(this.options.container);
+   if (container) {
+     scrollTop = container.scrollTop;
+   }
    this.container.focus();
    const that = this;
    this.quill.selection.update((Quill as any).sources.SILENT);
    setTimeout(() => {
      delta = delta.concat(this.convert()).delete(range.length);
      that.quill.updateContents(delta, (Quill as any).sources.USER);
      // range.length contributes to delta.length()
      that.quill.setSelection(delta.length() - range.length, (Quill as any).sources.SILENT);
      that.quill.focus();
      container.scrollTop = scrollTop;
    }, 1);
  }
// config
clipboard: {
    // bump top bug
+   container: 'html',
},

[camsjams]

@alexkrolick This does appear to be related to focus events, but I am investigating this for my app and it might be caused by css for some. I will get back to this thread with my findings.

[camsjams]

My findings are that this is not an issue with Quill or React Quill, but simply a CSS issue.

Using "react-quill": "1.3.3", and also by updating the link @finom pasted above, here is the solution:
https://codepen.io/anon/pen/KYPydj

You will see that the HTML element (different for everyone) that surrounds the Quill editor must have a set height of some sort, and likewise the div with the quill class must be set to height: 100%:

.app {
  height: 400px;
}
.quill {
  height: 100%;
}

Please Note:
In the code pen link you'll note that I removed all of the CSS, JS, and HTML aside from the necessary things for this bug, the rest of the CSS is default from Quill and the Snow theme.

The HTML around the React-Quill is important, as the CSS must work in a way where the <div class="quill" /> wrapper is inside something with a static height.

Final Thoughts:
While this may not work for everyone CSS-wise depending on the styles, it does fix these issues:

• Scrolling to top after a paste (ctrl+v or cmd+v)
• Scrolling to top after selecting text and applying paragraph formatting
• Scrolling to top after selecting text and applying font-sizes or font-families

I am willing to help here if anyone has questions. Before you ask, please verify that your CSS and HTML match my example as best as possible (on my app its more complicated but I still follow the rules of the static height wrapper and the <div class="quill" />)

[SufiyaanRajput]

Hi @camsjams ,
We have a similar container and have tried the solution you have provided on a sample app and could not get it to work.
https://codesandbox.io/s/8485023xw8

Any suggestions?

Thanks!

[camsjams]

Hopefully we can figure this out!

In your example on codesandbox I see that the cursor stays at the bottom even after paste or heading changes, as expected.

I've tested in latest Firefox, Chrome, and Chromium. What browser are you testing on?

[SufiyaanRajput]

Hi,
Actually if you paste any text, the whole container flickers on mobile devices. I have tested on chrome and safari. That's what I am trying to figure out. Especially on ios.

Thanks.

[itsmhuang]

I commented this on an issue on the quilljs github, but same thing can be applied here.
Add scrolling-container="html" to your ReactQuill component and add this css:

.ql-clipboard {
  position: fixed;
}

it fixed the problem for me. try it out.

[huanlirui]

我也遇到了这个问题。请问如何解决？
我通过监听paste事件，手动修改滚动条，虽然能够执行，但是最终还是会被不知名的问题覆盖，回到顶部。

我也遇到了这个问题。请问如何解决？
我通过监听paste事件，手动修改滚动条，虽然能够执行，但是最终还是会被不知名的问题覆盖，回到顶部。
I also have this problem. How to solve it?

I can manually modify the scroll bar by listening to the paste event. Although it can be executed, it will eventually be covered by unknown problems and return to the top.

[huanlirui]

Hi @camsjams ,
Your solution is to add a built-in scroll bar, which is indeed feasible in some cases. However, if there is a scroll bar on the parent container, the paste will pull the grandfather container back to the top.

[huanlirui]

现在我解决了这个问题：
首先，设置 scrollingContainer="your scroll DIV DOM"
然后设置CSS
.ql-clipboard {
position: fixed !important;
left: 50% !important;
top: 50% !important;
}

Now I've solved the problem:
First, set scrollingcontainer = "your scroll div DOM"
Then set up CSS
.ql-clipboard {
position: fixed !important;
left: 50% !important;
top: 50% !important;
}
try it

[Jerry-Lau]

现在我解决了这个问题：
首先，设置 scrollingContainer="your scroll DIV DOM"
然后设置CSS
.ql-clipboard {
position: fixed !important;
left: 50% !important;
top: 50% !important;
}

Now I've solved the problem:
First, set scrollingcontainer = "your scroll div DOM"
Then set up CSS
.ql-clipboard {
position: fixed !important;
left: 50% !important;
top: 50% !important;
}
try it

you should not use left: 50% top: 50%, just position: fixed will do.