Add enter key handler to dictionary keys (#4140)

microsoft · Nov 30, 2020 · bc0bb03 · bc0bb03
1 parent e5b3545
commit bc0bb03
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/packages/tooling/fast-tooling-react/src/form/controls/utilities/dictionary.tsx b/packages/tooling/fast-tooling-react/src/form/controls/utilities/dictionary.tsx
@@ -117,6 +117,7 @@ class Dictionary extends React.Component<
                         }
                         onFocus={this.handleKeyFocus(propertyName)}
                         onBlur={this.handleKeyBlur(propertyName)}
+                        onKeyDown={this.handleKeyPress()}
                         onChange={this.handleKeyChange(propertyName)}
                     />
                     <button
@@ -229,6 +230,15 @@ class Dictionary extends React.Component<
         };
     };
 
+    private handleKeyPress = (): ((e: React.KeyboardEvent<HTMLInputElement>) => void) => {
+        return (e: React.KeyboardEvent<HTMLInputElement>): void => {
+            if (e.keyCode === 13) {
+                e.currentTarget.blur();
+                e.preventDefault();
+            }
+        };
+    };
+
     private handleKeyChange = (
         propertyName: string
     ): ((e: React.ChangeEvent<HTMLInputElement>) => void) => {