trigger form update on submitting

Author: ShMcK

lib/components/Config/index.js

@@ -63,26 +63,32 @@ var TutorialConfig = (function (_super) {
         TopPanel_1.topElement.toggle(false);
         document.getElementsByTagName('input')[0].focus();
     };
-    TutorialConfig.prototype.shouldComponentUpdate = function () {
-        return !(document.activeElement &&
+    TutorialConfig.prototype.shouldComponentUpdate = function (t) {
+        var textInputIsActive = (document.activeElement &&
             typeof document.activeElement.value === 'string');
+        return this.props.submitting || !textInputIsActive;
     };
     TutorialConfig.prototype.onSubmit = function (values) {
+        var _this = this;
         var packageJson = this.props.packageJson;
         var name = values.name, runnerItem = values.runnerItem, repo = values.repo;
         var _a = runnerItem.split(': '), language = _a[0], runner = _a[1];
         var dependencies = handleDeps_1.default(packageJson, runner);
-        this.props.pjSave(Object.assign({}, packageJson, {
-            name: name,
+        var repoObj = repo ? {
             repository: repo || '',
             bugs: {
                 url: repo || '',
             },
+        } : {};
+        this.props.submitting = true;
+        setTimeout(function () { return _this.props.submitting = false; }, 300);
+        this.props.pjSave(Object.assign({}, packageJson, {
+            name: name,
             dependencies: dependencies,
             config: {
                 language: language, runner: runner,
             }
-        }));
+        }, repoObj));
     };
     TutorialConfig.prototype.routeToPage = function () {
         this.props.tutorialInit();

src/components/Config/index.tsx

@@ -64,33 +64,41 @@ class TutorialConfig extends React.Component <{
     // focus first element
     document.getElementsByTagName('input')[0].focus();
   }
-  shouldComponentUpdate() {
+  shouldComponentUpdate(t) {
     // hack to prevent lost focus on component update
-    return !(
+    const textInputIsActive = (
       document.activeElement &&
       typeof document.activeElement.value === 'string'
     );
+    return this.props.submitting || !textInputIsActive;
   }
   onSubmit(values) {
     const {packageJson} = this.props;
     const {name, runnerItem, repo} = values;
     const [language, runner] = runnerItem.split(': ');
     const dependencies = handleDeps(packageJson, runner);
+    const repoObj = repo ? {
+      repository: repo || '',
+      bugs: {
+        url: repo || '',
+      },
+    } : {};
+
+    // trigger submitted updates
+    this.props.submitting = true;
+    setTimeout(() => this.props.submitting = false, 300);
 
     this.props.pjSave(Object.assign(
       {},
       packageJson,
       {
         name,
-        repository: repo || '',
-        bugs: {
-          url: repo || '',
-        },
         dependencies,
         config: {
           language, runner,
         }
-      })
+      },
+      repoObj)
     );
   }
   routeToPage() {
@@ -99,6 +107,7 @@ class TutorialConfig extends React.Component <{
   }
   render() {
     const {submitting, handleSubmit, invalid, packageJson} = this.props;
+
     // select runner items
     return (
     <section className='cr-page'>
@@ -112,7 +121,6 @@ class TutorialConfig extends React.Component <{
             style={styles.form}
             onSubmit={handleSubmit(this.onSubmit.bind(this))}
           >
-
             <Field
               id='name'
               name='name'