Return focus into the input field with tab and enter

Author: EkaterinaVu

src/components/FlowForm.vue

@@ -292,15 +292,23 @@
       /**
        * Global key listener, listens for Enter or Tab key events.
        */
-      onKeyListener(e) {
+       onKeyListener(e) {
         if (e.shiftKey) {
           return
         }
+        if (e.key === 'Enter'|| e.key === 'Tab') {
+          const q = this.activeQuestionComponent()
 
-        if (e.key === 'Enter' || e.key === 'Tab') {
-          e.stopPropagation()
+          if(!q.getFocus() && q.getCanReceiveFocus()){
+            q.focusField()
+            return
+          }
 
-          this.emitEnter()
+          if(e.key === 'Enter') {
+           this.emitEnter()
+          } 
+
+          e.stopPropagation()
           this.reverse = false
         }
       },
@@ -311,6 +319,20 @@
           e.preventDefault()
           this.goToPreviousQuestion()
         }
+
+        if (e.key === 'Tab') {
+          e.preventDefault()
+          const q = this.activeQuestionComponent()
+
+          if(!q.getFocus() && q.getCanReceiveFocus()){
+            q.focusField()
+            return
+          }
+
+          this.emitTab()
+          e.stopPropagation()
+          this.reverse = false
+        }
       }, 
 
       emitEnter() {
@@ -325,6 +347,18 @@
         }
       },
 
+      emitTab() {
+        const q = this.activeQuestionComponent()
+
+        if (q) {
+          // Send tab event to the current question component
+          q.onTab()
+        } else if (this.completed && this.isOnLastStep) {
+          // We're finished - submit form
+          this.submit()
+        }
+      },
+
       submit() {
         this.emitSubmit()
         this.submitted = true

src/components/Question.vue

@@ -153,20 +153,45 @@
         this.focusField()
       },
 
+      returnFocus(){
+        const q = this.$refs.questionComponent
+        if(!q.focused && q.canReceiveFocus){
+          this.focusField()
+          return
+        }
+      },
+
       /**
        * Emits "answer" event and calls "onEnter" method on Enter press
        */ 
       onEnter($event) {
         const q = this.$refs.questionComponent
-
-        if (q) {
-          if (!q.focused) {
+        if (this.question.type === QuestionType.LongText){
+          if(!q.focused){
             this.$emit('answer', q)
           }
-          q.onEnter()
-        }
+           q.onEnter()
+        } 
+      
+        this.returnFocus()
+        this.$emit('answer', q)
+        q.onEnter()
       },
 
+      onTab($event) {
+        const q = this.$refs.questionComponent
+        this.returnFocus()
+        this.$emit('answer', q)
+        q.onEnter()
+      },
+
+      getFocus(){
+        return this.$refs.questionComponent.focused
+      },
+
+      getCanReceiveFocus(){
+        return this.$refs.questionComponent.canReceiveFocus
+      },
       /**
        * Check if the "OK" button should be shown.
        */

src/components/QuestionTypes/BaseType.vue

@@ -30,7 +30,8 @@
         enterPressed: false,
         allowedChars: null,
         alwaysAllowedKeys: ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace'],
-        focused: false
+        focused: false,
+        canReceiveFocus: false,
       }
     },
     mounted() {
@@ -85,10 +86,10 @@
         this.enterPressed = false
         clearTimeout(this.timeoutId)
 
-        if ($event) {
-          if ($event.key === 'Enter') {
-            this.unsetFocus()
-          }
+         if ($event) {
+         /* if ($event.key === 'Enter') {
+              this.unsetFocus()
+            } */
 
           if (this.allowedChars !== null) {
             // Check if the entered character is allowed.

src/components/QuestionTypes/LongTextType.vue

@@ -35,6 +35,11 @@
     components: {
       TextareaAutosize
     },
+    data () {
+      return {
+        canReceiveFocus: true,
+      }
+    },
     mounted() {
       window.addEventListener('resize', this.onResizeListener)
     },

src/components/QuestionTypes/PhoneType.vue

@@ -35,7 +35,8 @@
     name: QuestionType.Phone,
     data() {
       return {
-        inputType: 'tel'
+        inputType: 'tel', 
+        canReceiveFocus: true,
       }
     }
   }

src/components/QuestionTypes/TextType.vue

@@ -30,7 +30,8 @@
     name: QuestionType.Text,
     data() {
       return {
-        inputType: 'text'
+        inputType: 'text', 
+        canReceiveFocus: true,
       }
     }
   }