feat(editableInput): adds keyboard shortcuts

innovaccer · Jan 27, 2021 · 19c6327 · 19c6327
1 parent 66d132e
commit 19c6327
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/core/components/molecules/editableInput/EditableInput.tsx b/core/components/molecules/editableInput/EditableInput.tsx
@@ -128,6 +128,19 @@ export const EditableInput = (props: EditableInputProps) => {
     />
   );
 
+  const onKeyDown = (event: any) => {
+    if (document.activeElement === inputRef.current) {
+      switch (event.key) {
+        case 'Enter':
+          onSaveChanges();
+          break;
+        case 'Escape':
+          setDefaultComponent();
+          break;
+      }
+    }
+  };
+
   const renderChildren = () => {
     if (showComponent) {
       return error && errorMessage && editing ? (
@@ -164,6 +177,7 @@ export const EditableInput = (props: EditableInputProps) => {
       data-test="DesignSystem-EditableInput"
       {...baseProps}
       className={EditableInputClass}
+      onKeyDown={onKeyDown}
     >
       <Editable
         onChange={onChangeHandler}