Update how placeholder property triggers a component re-render.

1. What version of RJEA are you using (react-json-editor-ajrm version)? 2.5.5
2. What operating system and processor architecture are you using? macOS 10.13.6
3. What did you do? Update placeholder passed to RJEA through onChange
4. What did you expect to see? Cursor position is maintained
5. What did you see instead? Cursor position is reset to 0

import React, { Component } from 'react';
import JSONInput from 'react-json-editor-ajrm';
import locale    from 'react-json-editor-ajrm/locale/en';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      obj: {name: 'Bob'},
    };
    this.objUpdate = this.objUpdate.bind(this);
  }

  objUpdate(arg){
    if(arg.jsObject){
      this.setState({obj: arg.jsObject});
    }
  }
  
  render() {
    return (
      <JSONInput
        id          = 'a_unique_id'
        placeholder = { this.state.obj }
        locale      = { locale }
        onChange    = { this.objUpdate }
      />
    );
  }
}

export default App;

This is my App.js after create-react-app and adding RJEA. I’m passing obj which belongs to App’s state as placeholder. Whenever I trigger an onChange (use the arrow keys, make edits) the state is set again.

Just moving the cursor around and waiting for an update (1 sec) causes the cursor to jump to start.

Moving the this.getCursorPosition() above the onChange() partially fixes the error. The cursor no longer jumps to the start, but when the cursor is at the start of a line it jumps to the end of the previous line.

[AndrewRedican]

Hi @cgvedant,

Your observation was brilliant. I’ve taken your feedback into account. I’ve extended the logic to how changes in placeholder determine whether component will re-render:

If the same value for the placeholder property is provided, the component it will not re-render. However, if the component’s content has already been edited and differs from its initial placeholder value, sending the same placeholder value will effectively allow the component to re-render, thus resetting it.

Please let me know if this works for you.

[cgvedant]

@AndrewRedican I see a potential issue with the way showPlaceholder updates. Suppose I’m editing a JSON with a reset button that resets the content to some template. Previously for this type of reset to work, we could just pass the same template JSON but as a new object. But now we would need to actually change the content of the template or make an intermediate change for the reset to work. This is not how I’m going to use this component, but it could be a very confusing gotcha for people who don’t know how this component treats placeholder.

I feel the best way to go forward is to let react handle the diffing of props and always accept the latest value from the placeholder. Again, adding a flag that ignores placeholder after mount looks like the best design to me(I’m very new to react though).