The value of the editor is not updated about react-simplemde-editor

[haench]

Hi,

I ran into the same issue: I think it is realted to componentDidUpdate this part

    if (
      !this.state.keyChange &&
      this.props.value !== this.state.value && // This is somehow fixes moving cursor for controlled case
      this.props.value !== prevProps.value // This one fixes no value change for uncontrolled input. If it's uncontrolled prevProps will be the same
    ) {
      this.simpleMde!.value(this.props.value || "");
    }

the state is not correctly updated when props change.

A simple trick solved the issue: I provided a key attribute with a unique id. Thats makes sure the component is rerendered on props change (I think):
<SimpleMDEReact key={unique_id} value={my_value} onChange={value => onChange} />

[patmood]

This bug depends if the component is controlled or uncontrolled and any solutions should test both cases.

I'm using it as a controlled component and fixed the issue by removing all references to state, since it's not required. I'll try creating a PR that handles both cases.

[RIP21]

Hey, @fabriceci thanks for a filled issue.
Can you please make a reproduction using codesandbox.io? Because it's really hard to get what's the issue from the screenshot and this code.
Repro will make it way easier for me to investigate the bug.

[fabriceci]

Yes of course: here is the codesandbox

• Click on Article 1 , then Article 2 and then Article 1. You will see the desc value will disappear (value of article 2)
• Click on Article 2, then Article 1 then Article 2. You will see the desc value will be the value of Article 1 desc.

As you can see here, the value is updated in the component but not displayed properly.

[RIP21]

@fabriceci still had no time to take a look at this one. Hopefully next weekend will investigate it further.

[fabriceci]

@RIP21 Thank you! I regret not to be able to do more.

[AlexanderLapshin]

Any update?

[RIP21]

@haench yes. If you change key prop it forces component to remount from scratch. It's one of the recommended ways of hard reloading components.
I don't know whether I will have time to fix that. Hopefully soon :( Sorry guys, I have life and a lot of work at Revolut and I just don't have any time now for investigating this particular issue.

[crivera]

Hi

i have a similar issue when I set the value to be empty from extraKeys it will break after the first time.

Here is an example

https://codesandbox.io/s/stoic-wright-tn4l7?fontsize=14&hidenavigation=1&theme=dark

Type something and hit enter... the editor will empty out the field. Now type something again and hit enter and you will see nothing happens

[crivera]

it seems this line in componentDidUpdate is the problem:

this.props.value !== prevProps.value

can we remove this?

[RIP21]

Hi there. If it fixes the issue and all other functionality is still working, then yes. Please feel free to open PR.

…

On Mon, Nov 25, 2019, 17:38 Christopher Rivera ***@***.***> wrote: it seems this line in componentDidUpdate is the problem: this.props.value !== prevProps.value can we remove this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#79?email_source=notifications&email_token=AA6B5372D2OYEG6GYGFM743QVP5RPA5CNFSM4GJ5MXDKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFDAM6Y#issuecomment-558237307>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6B534YUF7ZQR4ADMSGWIDQVP5RPANCNFSM4GJ5MXDA> .

[crivera]

actually my codesandbox was not on the latest version... at the latest version it works fine

https://codesandbox.io/s/stoic-wright-tn4l7?fontsize=14&hidenavigation=1&theme=dark

[RIP21]

This one is I'm sure is sorted by the latest changes I did in version 5.0.0. Please check it out! It's totally rewritten and uses hooks now.
Mind breaking changes!