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

e.preventDefault();

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

Tags:

quill
quill js
react quill
react
next.js
wysiwyg
text editor
brwoser behaviour

Sources:

https://github.com/quilljs/quill/issues/1374https://www.npmjs.com/package/react-quill

More posts of this category

Conditionally add a HTML attribute in React

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

React

How to pass variables down to child components

Work with props in React/Next.js with TypeScript

React

An easy and elegant way to change a boolean useState value

How to toggle a useState boolean value easily

React

Scroll to the page top after rendering a React component

Fix the annoying SPA issue and scroll to the top!

React