Tab and focus improvements

Author: phre1

examples/questionnaire/Example.vue

@@ -229,9 +229,6 @@
         // we need to implement the "keyup" listener manually.
 
         if ($event.key === 'Enter' && this.completed && !this.submitted) {
-          // Set `submitted` to true so the form knows not to allow back/forward
-          // navigation anymore.
-          this.$refs.flowform.submitted = true
           this.onSendData()
         }
       },
@@ -250,6 +247,10 @@
       },
       
       onSendData() {
+        // Set `submitted` to true so the form knows not to allow back/forward
+        // navigation anymore.
+        this.$refs.flowform.submitted = true
+
         this.submitted = true
 
         /* eslint-disable-next-line no-unused-vars */

examples/quiz/Example.vue

@@ -321,7 +321,11 @@
       }, 
 
       onQuizSubmit() {
-        this.submitted = true 
+        // Set `submitted` to true so the form knows not to allow back/forward
+        // navigation anymore.
+        this.$refs.flowform.submitted = true
+        
+        this.submitted = true
         this.calculateScore()
       }
     }

src/assets/css/common.css

@@ -275,8 +275,9 @@ span.faux-form {
   margin-top: 28px;
 }
 
-span.f-sub + .f-answer.full-width, div.field-sectionbreaktype .f-answer {
-  margin-top: 14px
+span.f-sub + .f-answer.full-width,
+div.field-sectionbreaktype .f-answer {
+  margin-top: 16px
 }
 
 span.f-empty {
@@ -349,7 +350,6 @@ h3,
 }
 
 @media screen and (max-width:767px) {
-
   h2,
   .fh2 {
     font-size: 2.2rem;
@@ -359,7 +359,6 @@ h3,
 }
 
 @media screen and (max-width:479px), (max-height:400px) {
-
   h2,
   .fh2 {
     font-size: 1.4rem;

src/components/FlowForm.vue

@@ -144,15 +144,15 @@
       }
     },
     mounted() {
-      document.addEventListener('keyup', this.onKeyListener, true)
-      document.addEventListener('keydown', this.onBackKeyListener)
+      document.addEventListener('keydown', this.onKeyDownListener)
+      document.addEventListener('keyup', this.onKeyUpListener, true)
       window.addEventListener('beforeunload', this.onBeforeUnload)
 
       this.setQuestions()
     },
     beforeDestroy() {
-      document.removeEventListener('keyup', this.onKeyListener, true)
-      document.removeEventListener('keydown', this.onBackKeyListener)
+      document.removeEventListener('keydown', this.onKeyDownListener)
+      document.removeEventListener('keyup', this.onKeyUpListener, true)
       window.removeEventListener('beforeunload', this.onBeforeUnload)
     },
     computed: {
@@ -290,50 +290,53 @@
       },
 
       /**
-       * Global key listener, listens for Enter or Tab key events.
+       * Global key listeners, listen for Enter or Tab key events.
        */
-       onKeyListener(e) {
-        if (e.shiftKey) {
+      onKeyDownListener(e) {
+        if (e.key !== 'Tab' || this.submitted) {
           return
         }
-        if (e.key === 'Enter'|| e.key === 'Tab') {
-          const q = this.activeQuestionComponent()
 
-          if(!q.getFocus() && q.getCanReceiveFocus()){
-            q.focusField()
-            return
-          }
 
-          if(e.key === 'Enter') {
-           this.emitEnter()
-          } 
-
-          e.stopPropagation()
-          this.reverse = false
-        }
-      },
-
-      onBackKeyListener(e) {
-        if (e.shiftKey && e.key === 'Tab' ) {
+        if (e.shiftKey) {
           e.stopPropagation()
           e.preventDefault()
-          this.goToPreviousQuestion()
-        }
 
-        if (e.key === 'Tab') {
+          this.goToPreviousQuestion()
+        } else {
           e.preventDefault()
+          
           const q = this.activeQuestionComponent()
 
-          if(!q.getFocus() && q.getCanReceiveFocus()){
+          if (q.shouldFocus()) {
             q.focusField()
-            return
+          } else {
+            e.stopPropagation()
+
+            this.emitTab()
+            this.reverse = false
           }
+        }
+      }, 
+
+      onKeyUpListener(e) {
+        if (e.shiftKey || ['Tab', 'Enter'].indexOf(e.key) === -1 || this.submitted) {
+          return
+        }
+
+        const q = this.activeQuestionComponent()
+
+        if (e.key === 'Tab' && q.shouldFocus()) {
+          q.focusField()
+        } else {
+          if (e.key === 'Enter') {
+            this.emitEnter()
+          } 
 
-          this.emitTab()
           e.stopPropagation()
           this.reverse = false
         }
-      }, 
+      },
 
       emitEnter() {
         const q = this.activeQuestionComponent()
@@ -353,9 +356,8 @@
         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()
+        } else {
+          this.emitEnter()
         }
       },
 
@@ -377,6 +379,10 @@
        * can jump to it.
        */
       isNextQuestionAvailable() {
+        if (this.submitted) {
+          return false
+        }
+
         const q = this.activeQuestion
   
         if (q && !q.required) {

src/components/Question.vue

@@ -153,11 +153,17 @@
         this.focusField()
       },
 
-      returnFocus(){
+      shouldFocus() {
         const q = this.$refs.questionComponent
-        if(!q.focused && q.canReceiveFocus){
+
+        return q && q.canReceiveFocus && !q.focused
+      },
+
+      returnFocus() {
+        const q = this.$refs.questionComponent
+
+        if (this.shouldFocus()) {
           this.focusField()
-          return
         }
       },
 
@@ -166,32 +172,27 @@
        */ 
       onEnter($event) {
         const q = this.$refs.questionComponent
-        if (this.question.type === QuestionType.LongText){
-          if(!q.focused){
+
+        if (q) {
+          if (!q.focused) {
             this.$emit('answer', q)
           }
-           q.onEnter()
-        } 
-      
-        this.returnFocus()
-        this.$emit('answer', q)
-        q.onEnter()
+
+          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
+        if (q) {
+          this.returnFocus()
+          this.$emit('answer', q)
+          
+          q.onEnter()
+        }
       },
+      
       /**
        * Check if the "OK" button should be shown.
        */

src/components/QuestionTypes/BaseType.vue

@@ -86,10 +86,10 @@
         this.enterPressed = false
         clearTimeout(this.timeoutId)
 
-         if ($event) {
-         /* if ($event.key === 'Enter') {
-              this.unsetFocus()
-            } */
+        if ($event) {
+          if ($event.key === 'Enter' && !$event.shiftKey) {
+            this.unsetFocus()
+          }
 
           if (this.allowedChars !== null) {
             // Check if the entered character is allowed.
@@ -157,10 +157,6 @@
       }
     },
     computed: {
-      editingFinished() {
-        return true
-      },
-
       placeholder() {
         return this.question.placeholder || this.language.placeholder
       },

src/components/QuestionTypes/LongTextType.vue

@@ -37,7 +37,7 @@
     },
     data () {
       return {
-        canReceiveFocus: true,
+        canReceiveFocus: true
       }
     },
     mounted() {
@@ -68,11 +68,6 @@
           this._onEnter()
         }
       }
-    },
-    computed: {
-      editingFinished() {
-        return !this.isMobile
-      }
     }
   }
 </script>

src/components/QuestionTypes/PhoneType.vue

@@ -36,7 +36,7 @@
     data() {
       return {
         inputType: 'tel', 
-        canReceiveFocus: true,
+        canReceiveFocus: true
       }
     }
   }

src/components/QuestionTypes/TextType.vue

@@ -31,7 +31,7 @@
     data() {
       return {
         inputType: 'text', 
-        canReceiveFocus: true,
+        canReceiveFocus: true
       }
     }
   }