react-quill Window is scrolled to top after paste

To reproduce,

Open the example: https://codepen.io/finom/pen/QBBzgG
Scroll to bottom.
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

Aug 06 '18 09:08 finom

This might have to do with how focus events are handled

Aug 07 '18 01:08 alexkrolick

Any solution?

Nov 05 '18 13:11 Ciberusps

me too.

tooltip click will scrollTop
paste scrollTop

@alexkrolick How to deal with the bug?

Jan 16 '19 12:01 ycjcl868

Same here. Looking forward to a solution.

Jan 31 '19 03:01 TinaTseng

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',
},

Jan 31 '19 03:01 ycjcl868

@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.

Mar 29 '19 03:03 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" />)

Mar 29 '19 22:03 camsjams

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!

Apr 16 '19 08:04 SufiyaanRajput

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?

Apr 16 '19 18:04 camsjams

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.

Apr 16 '19 18:04 SufiyaanRajput

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.

Oct 22 '19 21:10 itsmhuang

我也遇到了这个问题。请问如何解决？我通过监听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.

Oct 29 '19 09:10 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.

Oct 29 '19 09:10 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

Oct 30 '19 02:10 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

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

Dec 11 '19 08:12 jerrylau91

Any update on this please? @itsmhuang not working for me. Any pre-requisite to this? My main scroller is being scrolled to top, exactly what @huanlirui said.

Dec 07 '20 18:12 Puspendert

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

It very much is :-)

This is not a react-quill issue, its a Quill issue. A simple search will show lots of threads on this across github and SO. There are 2 connected issues: scroll and flicker.

Scroll is solved by setting scrollingContainer. The flicker is solved by forcing the clipboard to always remain on the screen.

In my case, scrollingContainer='html' solved the issue and then the flicker was solved by

.ql-clipboard {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  display: none;
}

This is all that is required. No complex JS required. Tested on Chrome, FF, Opera, Vivaldi, Brave & Edge.

References:

https://quilljs.com/docs/configuration/#scrollingcontainer
https://github.com/quilljs/quill/issues/1374
https://github.com/quilljs/quill/issues/2027
https://github.com/quilljs/quill/issues/2166
https://stackoverflow.com/questions/44445177/quilljs-jumps-to-top

Dec 18 '20 12:12 zehawki

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

It very much is :-)

This is not a react-quill issue, its a Quill issue. A simple search will show lots of threads on this across github and SO. I have 2 different usecases - one where the react-quill is on a scrollable modal, one where its on a scrollable page. The latter is easy to solve by using scrollingContainer. In my case, scrollingContainer='html' solved the issue and then the flicker was solved by
.ql-clipboard {
  position: fixed;
}
This is all that is required. Tested on Chrome, FF, Opera, Vivaldi, Brave & Edge.

I've not yet been able to solve my # 1 case - where I have quill (ie react-quill) on a scrolling modal. I will update here if and when I manage.

References:

https://quilljs.com/docs/configuration/#scrollingcontainer

quilljs/quill#2027

quilljs/quill#2166

https://stackoverflow.com/questions/44445177/quilljs-jumps-to-top

Adding scrollingContainer='html' to my component hasn't helped me.

But according to this reference https://github.com/quilljs/quill/issues/2027 , I've found two options which works for me:

Set className="scroll-block" to the scrolling block and than set this name to ReactQuill scrollingContainer=".scroll-block"
Find ReactQuill parent node with scroll and than set it to scrollingContainer (for example scrollingContainer={document.querySelector('.scroll-block')} where document.querySelector('.scroll-block') may be changed to ref, etc.)

Apr 12 '21 18:04 AlexanderPonomariov

Not using React (using native JS Quill), but issue in my case was in the fact that I had set

  max-height: 250px;
  overflow: auto;

to outer container, not to .ql-editor itself. Moved that code above to .ql-editor and it solved that issue.

Oct 07 '21 12:10 bobrosoft

Not using React (using native JS Quill), but issue in my case was in the fact that I had set
  max-height: 250px;
  overflow: auto;
to outer container, not to .ql-editor itself. Moved that above to .ql-editor and it solved that issue.

This worked like a charm, thank you. Hyperlinks and pasting were both causing a lot of trouble until changing my max-height from the parent container to .ql-editor.