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

• 1.4.0-beta.2
• 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

[jerrylau91]

现在我解决了这个问题：
首先，设置 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.

[Puspendert]

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.

[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. 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:

1. https://quilljs.com/docs/configuration/#scrollingcontainer
2. Pasting in content causes scroll to "jump" before going back to original position slab/quill#1374
3. Scroll position is lost after pasting (with scrollingContainer: null) slab/quill#2027
4. Scroll position jumps when editor is inside of wrapper div slab/quill#2166
5. https://stackoverflow.com/questions/44445177/quilljs-jumps-to-top

[AlexanderPonomariov]

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:

1. https://quilljs.com/docs/configuration/#scrollingcontainer
2. quilljs/quill#2027
3. quilljs/quill#2166
4. https://stackoverflow.com/questions/44445177/quilljs-jumps-to-top

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

But according to this reference slab/quill#2027 , I've found two options which works for me:

1. Set className="scroll-block" to the scrolling block and than set this name to ReactQuill scrollingContainer=".scroll-block"
2. 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.)

[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 code above to .ql-editor and it solved that issue.

[jasongrishkoff]

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.

[akshaybosamiya]

This issue seems mostly realated to CSS and DOM structure. I've prepared demo/solutions.

Link: https://codesandbox.io/s/react-quill-editor-auto-grow-height-okikc0

[gdutwyg]

you can set configuration scrollingContainer to your scroll dom, it is useful to me

[yucheng-Li]

you can set configuration scrollingContainer to your scroll dom, it is useful to me

if i found the right scroll item it work well thank~