globocom / megadraft

Megadraft is a Rich Text editor built on top of Facebook's Draft.JS featuring a nice default base of components and extensibility

Home Page:http://megadraft.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Data loss when swapping plugin blocks with blur update

mogavin opened this issue · comments

Expected Behavior

When swapping any block whose focus is on some internal input, no data from this input should be lost.

Current Behavior

Some plugin blocks whose editorState update depends on losing focus on the internal input (blur event) end up losing data after being swapped with another plugin block.

Steps to Reproduce

  1. Render a MegadraftEditor component with prop movableBlocks with true value;
  2. Add some plugin blocks whose input update depends on losing focus (example below):
export default class MyBlock extends Component {
//...some plugin code

  onBlur = e => {
    e.preventDefault();
    const { touched } = this.state;
    const target = e.target.name;

    this.setState(
      {
        touched: {
          ...touched,
          [target]: this.state[target] ? null : "The field is required"
        }
      },
      () => this.updateData()
    );
  };

  updateData = () => {
    //Here we call updateData from Media component 
    this.props.updateData(state);
  };

  render() {
    const { reviewType, touched } = this.state;

    return (
      <div>
        <FormControl error={touched.reviewItem}>
          <TextInput
            name="reviewItem"
            onBlur={this.onBlur}
            value={this.state.reviewItem}
          />
        </FormControl>

//...more plugin code
  1. Add another plugin block of any kind;
  2. Type some words inside the input and, without remove focus from input, swap blocks.
  3. The input will return to previous value (empty), ignoring the typed text.