fix inputs not blurring when pressing enter (#4692)

src/renderer/components/editable-list/editable-list.tsx

@@ -54,6 +54,7 @@ export class EditableList<T> extends React.Component<Props<T>> {
             onSubmit={this.onSubmit}
             validators={validators}
             placeholder={placeholder}
+            blurOnEnter={false}
             iconRight={({ isDirty }) => isDirty ? <Icon material="keyboard_return" size={16} /> : null}
           />
         </div>

src/renderer/components/input/input.tsx

@@ -52,6 +52,7 @@ export type InputProps = Omit<InputElementProps, "onChange" | "onSubmit"> & {
   iconRight?: IconData;
   contentRight?: string | React.ReactNode; // Any component of string goes after iconRight
   validators?: InputValidator | InputValidator[];
+  blurOnEnter?: boolean;
   onChange?(value: string, evt: React.ChangeEvent<InputElement>): void;
   onSubmit?(value: string, evt: React.KeyboardEvent<InputElement>): void;
 };
@@ -70,6 +71,7 @@ const defaultProps: Partial<InputProps> = {
   maxRows: 10000,
   showValidationLine: true,
   validators: [],
+  blurOnEnter: true,
 };
 
 export class Input extends React.Component<InputProps, State> {
@@ -267,6 +269,11 @@ export class Input extends React.Component<InputProps, State> {
       } else {
         this.setDirty();
       }
+
+      if(this.props.blurOnEnter){
+        //pressing enter indicates that the edit is complete, we can unfocus now
+        this.blur();
+      }
     }
   }
 

src/renderer/components/wizard/wizard.tsx

@@ -10,6 +10,7 @@ import { Button } from "../button";
 import { Stepper } from "../stepper";
 import { SubTitle } from "../layout/sub-title";
 import { Spinner } from "../spinner";
+import { debounce } from "lodash";
 
 interface WizardCommonProps<D = any> {
   data?: Partial<D>;
@@ -179,14 +180,16 @@ export class WizardStep extends React.Component<WizardStepProps, WizardStepState
     }
   };
 
-  submit = () => {
+  //because submit MIGHT be called through pressing enter, it might be fired twice.
+  //we'll debounce it to ensure it isn't
+  submit = debounce(() => {
     if (!this.form.noValidate) {
       const valid = this.form.checkValidity();
 
       if (!valid) return;
     }
     this.next();
-  };
+  }, 100);
 
   renderLoading() {
     return (
@@ -196,6 +199,17 @@ export class WizardStep extends React.Component<WizardStepProps, WizardStepState
     );
   }
 
+  //make sure we call submit if the "enter" keypress doesn't trigger the events
+  keyDown(evt: React.KeyboardEvent<HTMLElement>) {
+    if (evt.shiftKey || evt.metaKey || evt.altKey || evt.ctrlKey || evt.repeat) {
+      return;
+    }
+
+    if(evt.key === "Enter"){
+      this.submit();
+    }
+  }
+
   render() {
     const {
       step, isFirst, isLast, children,
@@ -216,6 +230,7 @@ export class WizardStep extends React.Component<WizardStepProps, WizardStepState
     return (
       <form className={className}
         onSubmit={prevDefault(this.submit)} noValidate={noValidate}
+        onKeyDown={(evt) => this.keyDown(evt)}
         ref={e => this.form = e}>
         {beforeContent}
         <div className={contentClass}>