Fix skipping questions when quickly mashing keys

Author: spinn

src/components/FlowForm.vue

@@ -14,6 +14,8 @@
           v-model="q.answer"
           v-on:answer="onQuestionAnswered"
           v-bind:reverse="reverse"
+          v-bind:disabled="disabled"
+          v-on:disable="setDisabled"
         />
 
         <slot></slot>
@@ -183,7 +185,8 @@
         reverse: false,
         timerOn: false,
         timerInterval: null,
-        time: 0
+        time: 0,
+        disabled: false
       }
     },
 
@@ -521,6 +524,10 @@
       },
 
       emitEnter() {
+        if (this.disabled) {
+          return
+        }
+
         const q = this.activeQuestionComponent()
 
         if (q) {
@@ -697,6 +704,10 @@
         }
 
         return new Date(1000 * seconds).toISOString().substr(startIndex, length)
+      },
+
+      setDisabled(state) {
+        this.disabled = state
       }
     },
 

src/components/FlowFormQuestion.vue

@@ -22,6 +22,7 @@
                   v-bind:language="language"
                   v-model="dataValue"
                   v-bind:active="active"
+                  v-bind:disabled="disabled"
                   v-on:next="onEnter"
                 />
               </span>
@@ -45,6 +46,7 @@
               v-bind:language="language"
               v-model="dataValue"
               v-bind:active="active"
+              v-bind:disabled="disabled"
               v-on:next="onEnter"
             />
           </div>
@@ -70,10 +72,11 @@
           v-on:click.prevent="onEnter"
           v-bind:aria-label="language.ariaOk"
         >
-            <span v-if="question.type === QuestionType.SectionBreak">{{ language.continue }}</span>
-            <span v-else-if="showSkip()">{{ language.skip }}</span>
-            <span v-else>{{ language.ok }}</span>
+          <span v-if="question.type === QuestionType.SectionBreak">{{ language.continue }}</span>
+          <span v-else-if="showSkip()">{{ language.skip }}</span>
+          <span v-else>{{ language.ok }}</span>
         </button>
+
         <a 
           class="f-enter-desc"
           href="#"
@@ -114,6 +117,7 @@
 
   export default {
     name: 'FlowFormQuestion',
+
     components: {
       FlowFormDateType,
       FlowFormDropdownType,
@@ -128,6 +132,7 @@
       FlowFormTextType,
       FlowFormUrlType
     },
+
     props: {
       question: QuestionModel,
       language: LanguageModel,
@@ -139,27 +144,37 @@
       reverse: {
         type: Boolean,
         default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
       }
     },
+
     mixins: [
       IsMobile
     ],
+
     data() {
       return {
         QuestionType: QuestionType,
         dataValue: null,
         debounced: false
       }
     },
+
     mounted() {
       this.focusField()
+
       this.dataValue = this.question.answer
 
       this.$refs.qanimate.addEventListener('animationend', this.onAnimationEnd)
     },
+
     beforeDestroy() {
       this.$refs.qanimate.removeEventListener('animationend', this.onAnimationEnd)
     },
+
     methods: {
       /**
        * Autofocus the input box of the current question
@@ -202,8 +217,13 @@
       checkAnswer(fn) {
         const q = this.$refs.questionComponent
 
-        if (q.isValid() && this.question.nextStepOnAnswer && !this.question.multiple) {
-          this.debounce(() => fn(q), 350)
+        if (q.isValid() && this.question.isMultipleChoiceType() && this.question.nextStepOnAnswer &&  !this.question.multiple) {
+          this.$emit('disable', true)
+
+          this.debounce(() => {
+            fn(q)
+            this.$emit('disable', false)
+          }, 350)
         } else {
           fn(q)
         }
@@ -256,7 +276,7 @@
           return true
         }
 
-        if (QuestionType.MultipleChoice && !this.question.multiple && this.question.nextStepOnAnswer) {
+        if (this.question.isMultipleChoiceType() && !this.question.multiple && this.question.nextStepOnAnswer) {
           return false
         }
       
@@ -290,6 +310,7 @@
         return q.showInvalid()
       }
     },
+
     computed: {
       mainClasses: {
         cache: false,

src/components/QuestionTypes/BaseType.vue

@@ -13,15 +13,19 @@
 
   export default {
     name: 'FlowFormBaseType',
+
     props: {
       language: LanguageModel,
       question: QuestionModel,
       active: Boolean,
+      disabled: Boolean,
       value: [String, Array, Boolean, Number, Object]
     },
+
     mixins: [
       IsMobile,
     ],
+
     data() {
       return {
         dirty: false,
@@ -34,13 +38,15 @@
         canReceiveFocus: false
       }
     },
+
     mounted() {
       if (this.question.answer) {
         this.dataValue = this.answer = this.question.answer
       } else if (this.question.multiple) {
         this.dataValue = []
       }
     },
+
     methods: {
       /**
        * This method can be overriden in custom components to 

src/components/QuestionTypes/DropdownType.vue

@@ -71,7 +71,7 @@
         }
       },
       onKeyUpListener($event) {
-        if ($event.key === 'Enter' && this.isValid()) {
+        if ($event.key === 'Enter' && this.isValid() && !this.disabled) {
           $event.stopPropagation()
           this._onEnter()
           this.$emit('next')

src/components/QuestionTypes/MultipleChoiceType.vue

@@ -174,7 +174,8 @@
           this.dataValue = option.selected ? optionValue : null
         }
 
-        if (this.isValid() && this.question.nextStepOnAnswer && !this.question.multiple) {
+      
+        if (this.isValid() && this.question.nextStepOnAnswer && !this.question.multiple && !this.disabled) {
           this.$emit('next')
         }
 

src/models/QuestionModel.js

@@ -193,4 +193,8 @@ export default class QuestionModel {
       }
     }
   }
+
+  isMultipleChoiceType() {
+    return [QuestionType.MultipleChoice, QuestionType.MultiplePictureChoice].includes(this.type)
+  }
 }