From 71e29c40cd8d0fc8477d493c81f6a2a3be32ccb4 Mon Sep 17 00:00:00 2001
From: Brian Cooper <brian@allegro.com>
Date: Mon, 11 Jun 2018 17:51:34 -0400
Subject: [PATCH] [fixup] morgan nit and ian comment addressed

---
 protocol-designer/src/components/FilePage.js | 73 +++++++++++---------
 1 file changed, 40 insertions(+), 33 deletions(-)

diff --git a/protocol-designer/src/components/FilePage.js b/protocol-designer/src/components/FilePage.js
index 4ee0b804ec96..d9df095e4b2e 100644
--- a/protocol-designer/src/components/FilePage.js
+++ b/protocol-designer/src/components/FilePage.js
@@ -18,41 +18,48 @@ export type FilePageProps = {
   saveFileMetadata: () => void
 }
 
-const FilePage = ({formConnector, isFormAltered, instruments, saveFileMetadata}: FilePageProps) => (
-  <div className={styles.file_page}>
-    <section>
-      <h2>
-        Information
-      </h2>
-      <form onSubmit={() => { console.log('DID IT') }}>
-        <div className={formStyles.row_wrapper}>
-          <FormGroup label='Protocol Name:' className={formStyles.column_1_2}>
-            <InputField placeholder='Untitled' {...formConnector('name')} />
-          </FormGroup>
+const FilePage = ({formConnector, isFormAltered, instruments, saveFileMetadata}: FilePageProps) => {
+  const handleSubmit = () => {
+    // blur focused field on submit
+    if (document && document.activeElement) document.activeElement.blur()
+    saveFileMetadata()
+  }
+  return (
+    <div className={styles.file_page}>
+      <section>
+        <h2>
+          Information
+        </h2>
+        <form onSubmit={handleSubmit}>
+          <div className={formStyles.row_wrapper}>
+            <FormGroup label='Protocol Name:' className={formStyles.column_1_2}>
+              <InputField placeholder='Untitled' {...formConnector('name')} />
+            </FormGroup>
 
-          <FormGroup label='Organization/Author:' className={formStyles.column_1_2}>
-            <InputField {...formConnector('author')} />
-          </FormGroup>
-        </div>
+            <FormGroup label='Organization/Author:' className={formStyles.column_1_2}>
+              <InputField {...formConnector('author')} />
+            </FormGroup>
+          </div>
 
-        <FormGroup label='Description:'>
-          <InputField {...formConnector('description')}/>
-        </FormGroup>
-        <div className={styles.button_row}>
-          <OutlineButton type="submit" className={styles.update_button} onClick={saveFileMetadata} disabled={!isFormAltered}>
-            {isFormAltered ? 'UPDATE' : 'SAVED'}
-          </OutlineButton>
-        </div>
-      </form>
-    </section>
+          <FormGroup label='Description:'>
+            <InputField {...formConnector('description')}/>
+          </FormGroup>
+          <div className={styles.button_row}>
+            <OutlineButton type="submit" className={styles.update_button} disabled={!isFormAltered}>
+              {isFormAltered ? 'UPDATE' : 'UPDATED'}
+            </OutlineButton>
+          </div>
+        </form>
+      </section>
 
-    <section>
-      <h2>
-        Pipettes
-      </h2>
-      <InstrumentGroup {...instruments} showMountLabel />
-    </section>
-  </div>
-)
+      <section>
+        <h2>
+          Pipettes
+        </h2>
+        <InstrumentGroup {...instruments} showMountLabel />
+      </section>
+    </div>
+  )
+}
 
 export default FilePage