The Be Sure Blog

Code Snippets | Problem Solving | Tips & Tricks

The Be Sure Blog banner

How I fixed the auto scroll bug of ReactQuill

posted on 14.6.2023 by Below Surface in "React"

ReactQuill is a well working WYSIWYG (what you see is what you get) text editor. However on long texts I would encounter a weird bug, where the browser would scroll up to a certain position, whenever I pasted some text into the editor. The working fix I discovered, was to add this to my CSS:

.ql-clipboard {
      position: fixed !important;

This seems to be a default browser behavior, because it can be disabled with


This however, would disable pasting text as well. So I went with the simple CSS fix from above, that I found on GitHub (link below).


quill js
react quill
text editor
brwoser behaviour


More posts of this category

Conditionally add a HTML attribute in React

How to add a HTML attribute like "selected" to a HTML element


How to pass variables down to child components

Work with props in React/Next.js with TypeScript


An easy and elegant way to change a boolean useState value

How to toggle a useState boolean value easily


Scroll to the page top after rendering a React component

Fix the annoying SPA issue and scroll to the top!