Data loss when swapping plugin blocks with blur update
mogavin opened this issue · comments
mogavin commented
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
- Render a
MegadraftEditor
component with propmovableBlocks
withtrue
value; - 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
- Add another plugin block of any kind;
- Type some words inside the input and, without remove focus from input, swap blocks.
- The input will return to previous value (empty), ignoring the typed text.