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:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

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.

rockcs1992commented, Jan 14, 2020

@Francesco-Lanciana Great that works!

Read more comments on GitHub >

github_iconTop 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...
Read more >
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...
Read more >
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...
Read more >
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; ...
Read more >
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...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found