Improve POS navigation #252

metasfresh · Feb 17, 2017 · 2a738f1 · 2a738f1
1 parent da0c980
commit 2a738f1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
@@ -364,7 +364,10 @@ class Table extends Component {
                 break;
             case 'Tab':
                 e.preventDefault();
-                document.getElementsByClassName('js-attributes')[0].focus();
+                const focusedElem = document.getElementsByClassName('js-attributes')[0];
+                if(focusedElem){
+                    focusedElem.getElementsByTagName("input")[0].focus();
+                }
                 break;
         }
     }

diff --git a/src/components/widget/Devices/Device.js b/src/components/widget/Devices/Device.js
@@ -51,6 +51,17 @@ class Device extends Component {
         })
     }
 
+    handleKey = (e) => {
+        const {handleChange} = this.props;
+        const {value} = this.state;
+
+        switch(e.key){
+            case 'Enter':
+                handleChange(value);
+                break;
+        }
+    }
+
     render() {
         const {value, index, isMore} = this.state;
         const {tabIndex} = this.props;
@@ -67,6 +78,7 @@ class Device extends Component {
                     onFocus={() => this.handleToggleChangeStopper(true)}
                     onMouseLeave={() => this.handleToggleChangeStopper(false)}
                     onBlur={() => this.handleToggleChangeStopper(false)}
+                    onKeyDown={(e) => this.handleKey(e)}
                 >
                     {isMore && <span className="btn-flag">{index + 1}</span>}
                     {value}