CSR-762 WIP

src/App.vue

@@ -2,7 +2,7 @@
   <router-view v-slot="{ Component }">
     <transition :duration="{ enter: 200, leave: 200 }" name="route-fade" mode="out-in">
       <!-- The above durations should be kept in sync with the global css class "fade-on-route-transition" -->
-      <component :is="Component" @input-focus="handleFocus" @input-blur="handleBlur"/>
+      <component :is="Component" @inputFocus="handleFocus" @input-blur="handleBlur"/>
     </transition>
   </router-view>
 </template>
@@ -10,13 +10,19 @@
 <script>
   export default {
     name: "app",
+    data() {
+      return {
+        lastFocusedInputGroupName: "",
+        onFocusCallback: null
+      }
+    },
     methods: {
       handleFocus(e) {
         console.log("app focus: ", e)
       },
       handleBlur(e) {
         console.log("app blur: ", e)
-      }
+      },
     }
   }
 </script>

src/common-components/base-input-button/base-input-button.vue

@@ -12,6 +12,7 @@
             :aria-required="isRequired"
             :value="value"
             :checked="isChecked"
+            @keypress.space="handleEventAction('space', $event)"
             @keypress.enter="handleEventAction('keypressSubmit', $event)"
             @change="handleEventAction('change', $event)" />
 

src/common-components/button-question/button-question.vue

@@ -236,13 +236,13 @@ export default {
             );
         },
         handleFocus() {
-            this.$emit("inputFocus", {
+            this.$root.handleFocus({
                 groupName: this.groupName,
                 value: this.primaryValue
             })
         },
         handleBlur() {
-            this.$emit("inputBlur", {
+            this.$root.handleBlur({
                 groupName: this.groupName,
                 value: this.primaryValue
             })

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue

@@ -5,7 +5,7 @@
     groupName="ChooseAddressVehicle"
     :questionText="questionText"
     :answers="vehicles"
-    v-model="selectedVehicleVinAsArray"
+    v-model="selectedVehicleVin"
     isRequired
     :validation-rules="validationRules"
     :valueToLogType="ValueToLogTypes.LAST_5"
@@ -63,18 +63,16 @@ export default {
     questionText() {
       return this.getCmsContent("VehicleConfirmationQuestion", "QuestionText");
     },
-    selectedVehicleVinAsArray: {
+    selectedVehicleVin: {
       get: function() {
-        const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
+        return this.modelValue;
-        return modelValueAsArray;
       },
       set: function(newValue) {
-        const newValueAsScalar = newValue && newValue.length > 0 ? newValue[newValue.length-1] : null;
+        this.$emit("update:modelValue", newValue);
-        this.$emit("update:modelValue", newValueAsScalar);
       }
     },
     selectedVehicle() { // this computed is only needed for the computed differentVehicleAlertBody text above
-      return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVinAsArray[this.selectedVehicleVinAsArray.length-1] );
+      return this.vehicles.find( ({ vin }) => vin === this.selectedVehicleVin[this.selectedVehicleVin.length-1] );
     },
   },
   components: {

src/layouts/address-vehicles/address-vehicles.vue

@@ -195,7 +195,7 @@ export default {
     selectedVehicleVin: {
       handler() {
         // does this vehicle match the previously selected carId?
-        this.isCarIdDifferent = this.selectedVehicle.vehicle.carId !== store.getters.vehicle.carId;
+        this.isCarIdDifferent = this.selectedVehicle?.vehicle.carId !== store.getters.vehicle.carId;
         if (this.isCarIdDifferent) {
           this.$refs.funnelFooter.updateButtonText(`Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`);
         } else {

src/mixins/input-button-wrapper-mixin.js

@@ -16,7 +16,10 @@ export default {
         valueToLogType: String,
         validationRules: String,
         isWide: Boolean,
-        isRequired: Boolean
+        isRequired: {
+            type: Boolean,
+            default: true
+        }
     },
     data() {
         return {