Fix editing entity id, trigger the update only on blur and enter, not on each keystroke (fix #51) (#52) (#823)

Author: vincentfretin

src/components/components/CommonComponents.js

@@ -133,7 +133,7 @@ export default class CommonComponents extends React.Component {
               ID
             </label>
             <InputWidget
-              onChange={changeId}
+              onBlur={changeId}
               entity={entity}
               name="id"
               value={entity.id}

src/components/widgets/InputWidget.js

@@ -5,23 +5,42 @@ export default class InputWidget extends React.Component {
   static propTypes = {
     id: PropTypes.string,
     name: PropTypes.string.isRequired,
+    onBlur: PropTypes.func,
     onChange: PropTypes.func,
     value: PropTypes.any
   };
 
   constructor(props) {
     super(props);
     this.state = { value: this.props.value || '' };
+    this.input = React.createRef();
   }
 
-  onChange = (e) => {
-    var value = e.target.value;
+  onChange = (event) => {
+    const value = event.target.value;
     this.setState({ value: value });
     if (this.props.onChange) {
       this.props.onChange(this.props.name, value);
     }
   };
 
+  onBlur = (event) => {
+    if (this.props.onBlur) {
+      const value = event.target.value;
+      this.props.onBlur(this.props.name, value);
+    }
+  };
+
+  onKeyDown = (event) => {
+    event.stopPropagation();
+
+    // enter
+    if (event.keyCode === 13) {
+      this.input.current.blur();
+      return;
+    }
+  };
+
   componentDidUpdate(prevProps) {
     if (this.props.value !== prevProps.value) {
       this.setState({ value: this.props.value || '' });
@@ -32,10 +51,13 @@ export default class InputWidget extends React.Component {
     return (
       <input
         id={this.props.id}
+        ref={this.input}
         type="text"
         className="string"
         value={this.state.value}
+        onBlur={this.onBlur}
         onChange={this.onChange}
+        onKeyDown={this.onKeyDown}
       />
     );
   }