The value of the editor is not updated

[fabriceci]

I have an issue in my app where I'm using the editor.

I use the editor in a CMS like applications. There is no issue in the first use of the editor in the app, the init value is correct. But when I change the current "edited page", the field still displayed the old value (previous edited page). I still can edit the editor, and it's ok, but the "init value" is wrong.

The value is correctly set as you can see in the screenshot but the value displayed is wrong. I tried many things but I failed to solve this.

Could you help me on that?

Here is a screenshot (as you can see the input above the editor works properly, it's not a react issue)

Here is the code:

          <SimpleMDE
            onChange={this.props.setArticleDescription}
            value={content.description}
            options={{
              autoDownloadFontAwesome: false,
              hideIcons: [
              ...
              ],
              spellChecker: false,
              status: false
            }}
          />

[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?

[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} />

[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 notifications@github.com 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 https://github.com/RIP21/react-simplemde-editor/issues/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

[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]

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!