The change in value prop does not change the text displayed in editor

[ghost]

I am probably missing something simple but I have a question regarding the value prop.

Below is the code that illustrates my problem.

import * as React from 'react';
import * as SimpleMDEReact from 'react-simplemde-editor';
import 'react-simplemde-editor/demo/dist/stylesheets/vendor.css';

export default class Note extends React.Component {
  public state = { value: '' };

  public handleEditorChange = (value: string) => {
    this.setState({ value: "asdfsdf" });
  };

  public render() {
    return (
      <SimpleMDEReact
        onChange={this.handleEditorChange}
        options={{ autofocus: true, spellChecker: true }}
        value={this.state.value}
      />
    );
  }
}

The handleEditorChange is called whenever user types anything.
In this method, I am currently setting value to something gibberish.
I am passing this value to the SimpleMDEReact component.

Expectation-
The SimpleMDEReact component should show only the value prop passed.

Observation-
The SimpleMDEReact component does not show what is passed in the value prop. Instead, it shows what the user types.

[RIP21]

Hm. This is interesting. Can you fill the reproducible example using https://codesandbox.io/?

[RIP21]

I got it reproduced. And it's very weird indeed. Needs to be fixed. Feel free to try to fix it, maybe someday will have time to dig into it.

@iaaflaafc
Also, take a look at the demo in demo folder in this repo. Funny thing that it works, but for some reason don't work for your case and I have no idea what is wrong TBH :)

[ghost]

I played with demo. I am able to reproduce the issue with simpler code.

import * as React from 'react';
import * as SimpleMDEReact from 'react-simplemde-editor';
import 'react-simplemde-editor/demo/dist/stylesheets/vendor.css';

export default class Demo extends React.Component {
  public render() {
    return (
      <SimpleMDEReact
        onChange={() => console.log('Not doing anything')}
        value="Initial value"
      />
    );
  }
}

It seems that the value prop that we pass is used only for the initial content that is shown.

If we change the value prop after SimpleMDEReact is mounted, the content that is shown does not reflect the value that is passed.

Basically, in demo file (demo.js), if we change

        <SimpleMDEReact
          label="Markdown Editor"
          value={this.state.textValue1}
          onChange={this.handleChange1}
        />

to

        <SimpleMDEReact
          label="Markdown Editor"
          value={"I am the initial value. Erase me, or try the button above."}
          onChange={() => console.log('Not doing anything')}
        />

It will continue to work as it does now.

[RIP21]

@iaaflaafc any idea how to fix that?
Yes, it behaves like a regular input with defaultValue, but in the demo, it's still updating when onChange triggered.
I need to dig into the SimpleMDE docs itself (I'm not the original author of this adoption)

[RIP21]

@iaaflaafc I think I found an issue, should be more controlled now. I will let you know once new version will be deployed.

[RIP21]

@iaaflaafc New version 3.6.16 released. Should solve your issue.

[alexarcombe]

Hi @RIP21, we are using 5.2.0, having the same issues as this ticket, did it break again and any plans of fixing it?

[RIP21]

Hi RIP21, we are using 5.2.0, having the same issues as this ticket, did it break again and any plans of fixing it?

@alexarcombe Please provide a reproduction or it's never happened :)

[alexarcombe]

Please provide a reproduction or it's never happened :)

Thanks for the response @RIP21, I'll try to provide everything you need.

I created a small codepen project, first time I use codepen so hopefully you can just follow the link and the app should start. https://codepen.io/alexarcombe/pen/xxJYdVz (Tried to make it easy for you)

The start value is "Start" and also on the change I limit the characters to 10. If you click on start and start typing you can see that it doesn't limit it and you can continue to write. If you open the console you can see that the value will be limited, but it is not reflected in the editor.

Hopefully this was clear enough, please tell me if you need anything else provided.

Cheers,
Arcombe