Code mirror value doesn't update with state change in v1.0.0

[MrSauceman]

Changing props.value does not re-render code mirror. This is a new issue in v1.0.0, previously this worked. Changing props.value via the onChange event works fine, but programmatically changing props.value does not call a re-render.

This can be reproduced with the following code.

class Editor extends Component {
    constructor() {
        super();
        this.state = { value: 'abc' };
    }

    render() {
        const { value } = this.state;
        console.log(value);
        return (
            <div>
                <CodeMirror value={value} />
                <button onClick={() => this.setState({ value: 'def' })}>Click to change value</button>
            </div>
        );
    }
}

This appears like it may have something to do with this change listed in the history file: fixed; Only updates the CodeMirror value if props.value has changed.

[marcioaffonso]

Same issue here, @MrSauceman, do you have a workaround?

[ovidiuch]

Created a PR to fix this #107. I've commented on this issue two days ago:

I think this revealed another bug. In my case the Codemirror is no longer updated even when props change. I'm pretty sure it's because componentWillReceiveProps is debounced, which results in this.props being equal to nextProps when the lifecycle method is called in the next loop.

@JedWatson what do you think about no longer debouncing componentWillReceiveProps? We could make it optional, but I wouldn't bother since I believe it is not compatible with the React lifecycle model. If performance is the concern then let's leave the debouncing up to the user.

This is the PR that that introduced the debouncing: #35. Maybe @alexdmiller has more insight into this issue.

[ovidiuch]

PS. Try using referencing my branch in your package.json (temporarily!) to see it solves your issues as well:

"react-codemirror": "git://github.com/skidding/react-codemirror.git#106-fix-update",

Update: You might want to use https://github.com/scniro/react-codemirror2

[marcioaffonso]

It works @skidding!

[ovidiuch]

Published my fork under @skidding/react-codemirror until #107 gets merged or resolved otherwise.

Update: You might want to use https://github.com/scniro/react-codemirror2

[scniro]

+1 whats going on with this? Merging the PR fix would be soooooper

[rocktavious]

Bump! I'm having this issue too!

[scniro]

For anyone who's still hung up on this or considering another editor, I'd highly recommend giving the raw codemirror library a look to use directly. I'm doing so with a tiny component wrapper I rolled and it's very straightforward. One less dep too (lodash as well)...

[MrSauceman]

@scniro care to share your wrapper?

[scniro]

@MrSauceman Of course. It's pretty bare bones, but here is what does the trick for me with some sample options...

wrapper

import React from 'react';
let codemirror = require('codemirror');

export default class CodeMirror extends React.Component {

  componentDidMount() {

    this.editor = codemirror(this.ref);
    this.editor.on('change', () => this.props.onChange(this.editor.getValue()));
  }

  componentWillReceiveProps(nextProps) {

    Object.keys(nextProps.options || {}).forEach(key => this.editor.setOption(key, nextProps.options[key]));
    this.editor.setValue(nextProps.value || '');
  }

  render() {
    return (
      <div ref={(self) => this.ref = self}/>
    )
  }
}

usage

<CodeMirror 
  value='foo' 
  options={{theme: 'material', viewportMargin: Infinity}} 
  onChange={value => {console.log(value); }} />

where value and options can be passed as a living prop from the parent component

[scniro]

Also, should anyone find this useful I threw up a super quick package on npm => react-codemirror2. If others find this useful I'll be happy to maintain it moving forward and build it up however we see fit.

[MartinHaeusler]

I think I ran into this issue as well. I'm using redux, so I can monitor which values are present in the application state. The codemirror editor clearly does not reflect the value property that was given to it. However, I am unable to pin down the cases when this bug occurs; in some regions of my UI it works as expected, in others the editor doesn't update...

[arjanfrans]

I am having the same issue, this makes the library unusable for me. I downgraded for now.