Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Toggling readOnly prop from true to false breaks the Editor

See original GitHub issue

Do you want to request a feature or report a bug?

Report a bug

What’s the current behavior?

Code Sandbox If you init the Editor with readOnly set to true, then toggle it to false, the onChange method won’t be called when making changes. But you can still edit the value, and see the changes. If you init the Editor with readOnly set to false, everything works as expected.

Slate: 0.54.2 Browser: Chrome / Firefox OS: Mac

What’s the expected behavior?

Call onChange even after toggling the readOnly prop.

Slack thread

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:6 (2 by maintainers)

Top GitHub Comments

2reactions

Francesco-Lancianacommented, Jan 12, 2020

Another workaround until #3388 is merged is that you can set a key on the Slate component to be equal to your readOnly state, this seems to force Slate into the correct state.

0reactions

rockcs1992commented, Jan 14, 2020

@Francesco-Lanciana Great that works!

Top Results From Across the Web

Set readonly property to false for an HTML text input on ...

The readonly attribute is a boolean. You can't set it to true or false , you can set it to readonly or not...

HTML DOM Input Text readOnly Property - W3Schools

The readOnly property sets or returns whether a text field is read-only, or not. ... true|false, Specifies whether a text field should be...

CodeMirror 5 User Manual

readOnly : boolean|string: This disables editing of the editor content by the user. If the special value "nocursor" is given (instead of simply...

How to disable or enable buttons using Javascript and jQuery

Logic behind toggling between disabled and enabled states of buttons ... true; //button remains disabled } else { button.disabled = false; ...

Documentation - SolidJS · Reactive Javascript Library

import { Show } from "solid-js"; function Show<T>(props: { when: T | undefined | null | false; keyed: boolean; fallback?: JSX.Element; children: JSX.Element...