Toggling readOnly prop from true to false breaks the Editor

[martonlanga]

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

[rockcs1992]

@martonlanga I'm also struggling with this bug. Do you have any fix or any work around yet?

[martonlanga]

Hey @rockcs1992, I think the only workaround for now is to init the Editor to with readOnly set to false, then change it to true.
@kena0ki made a pull request that should fix this bug, but it's still not merged :/
#3388

[rockcs1992]

@martonlanga Thanks for the update. I think I will go with your workaround at the moment. 😄

[Francesco-Lanciana]

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.

[martonlanga]

@Francesco-Lanciana That makes sense, great workaround!

[rockcs1992]

@Francesco-Lanciana Great that works!