diff --git a/src/App.vue b/src/App.vue index 501c46fd9..e09e04c99 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,7 +2,7 @@ - + @@ -10,13 +10,19 @@ diff --git a/src/common-components/base-input-button/base-input-button.vue b/src/common-components/base-input-button/base-input-button.vue index d6c63b06c..de269f7e3 100644 --- a/src/common-components/base-input-button/base-input-button.vue +++ b/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)" /> diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index a13cd4663..8d3abb287 100644 --- a/src/common-components/button-question/button-question.vue +++ b/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 }) diff --git a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue index 4bdaa8887..ade10ed99 100644 --- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue +++ b/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 modelValueAsArray; + return this.modelValue; }, set: function(newValue) { - const newValueAsScalar = newValue && newValue.length > 0 ? newValue[newValue.length-1] : null; - this.$emit("update:modelValue", newValueAsScalar); + this.$emit("update:modelValue", newValue); } }, 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: { diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue index 081b83fe9..a0edf876f 100644 --- a/src/layouts/address-vehicles/address-vehicles.vue +++ b/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 { diff --git a/src/mixins/input-button-wrapper-mixin.js b/src/mixins/input-button-wrapper-mixin.js index f2b34a83f..10a759927 100644 --- a/src/mixins/input-button-wrapper-mixin.js +++ b/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 {