readOnly doesn't disable the toolbar

[Pranav-Dakshina]

I using react-quill 1.3.3

When the props readOnly set to true, it only disables the text. The click events in toolbar still gets triggered.

[grachet]

same on beta

[zenoamaro]

I think this might be a behavior of upstream Quill.js. As can be seen in this codepen, which doesn't use ReactQuill, when readOnly is true, the toolbar remains interactive, even though the buttons do not actually do anything.

Do you experience a similar effect? If so, the problem lies with Quill.

Otherwise, can you provide a reproduction in a Codepen or CodeSandbox showing the issue?

[cfecherolle]

The issue is still there 2 years later :/

[code-technologist]

If you specified a theme for react-quill, you can remove the theme attribute to disable the toolbar in readOnly mode or use the bubble theme:

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.bubble.css';

//

<ReactQuill
    readOnly
    theme="bubble"
    value={textValue}
/>

[thepremiumcoder]

import ReactQuill from 'react-quill';

function ViewPage() {

  return (
    <ReactQuill theme="bubble" readOnly value="Sample Text"/>
  );
}

[lucasousi]

import ReactQuill from 'react-quill';

function ViewPage() {

  return (
    <ReactQuill theme="bubble" readOnly value="Sample Text"/>
  );
}

Thanks, use bubble theme or custom style with display: none works. I think this project is abandoned, I'm using react-quill-new, but this bug is also there.

[alas1n]

Hindg toolbar will couse layout shift in case of enabling it manually I suggest using opacity and pointer-event like this

.root-disabled {
    pointer-events: none;
    cursor: not-allowed;
}

.root-disabled .ql-toolbar.ql-snow * {
    opacity: 0.85;
}

And use it in JXS like:

<ReactQuill
  readOnly
  className={readOnly ? "root-disabled" : undefined}
/>

disabled:

enabled: