diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue index fca2b500c..b3ef4c6ae 100644 --- a/src/layouts/address-lookup/address-lookup.vue +++ b/src/layouts/address-lookup/address-lookup.vue @@ -297,8 +297,10 @@ export default { // if multiple cars were found let matchingCars = carsFound.filter(car => car.vehicle.carId === carEntered.carId); if (matchingCars.length === 1) { - // and one and only of them matches the car id entered this.$refs.loadingModal.showModal(); + + // and one and only of them matches the car id entered + const matchingCar = matchingCars[0]; this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle); navigateAfterSaveToHeritageFunnel(this.$route); } else { diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue index e4acdcee0..59e4d26ab 100644 --- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue +++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue @@ -175,7 +175,7 @@ export default ({ ); // Standard place_changed event handling - autocomplete.addListener('place_changed', fillInAddress); + const autocompleteListener = window.google.maps.event.addListener(autocomplete, 'place_changed', fillInAddress); // Wrapping the addressField1 element in the Google Address Autocomplete object // will cause "autocomplete='off'" which Chrome completely ignores. This event @@ -225,7 +225,6 @@ export default ({ } if (place && place.address_components) { - self.addressModel.streetAddress= ""; self.showAddressFields = true; for (const component of place.address_components) { @@ -262,7 +261,15 @@ export default ({ else { self.displayVerificationWarning = true; self.displayNoMatchWarning = false; - } + } + + // after showing the address fields, disable the address autocomplete + window.google.maps.event.removeListener(autocompleteListener); + window.google.maps.event.clearInstanceListeners(autocomplete); + addressField1.onchange = null; + const pacContainer = document.querySelector(".pac-container"); + pacContainer.remove(); + } }) .catch(() => { diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index e714e85cd..f27121675 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -3,6 +3,7 @@ html { &.list-button, &.list-card, &.list-card.list-button { + border: none; color: $red; input[type=checkbox]:focus + label, input[type=radio]:focus + label { @@ -13,10 +14,11 @@ html { } &:hover { box-shadow: 0px 0px 0px 4px $red-200; - border-radius: 10px; + border-radius: .5rem; } label { border: 1px solid $red; + border-radius: .5rem; } label:hover { box-shadow: 0px 0px 0px 4px $red-200; @@ -51,12 +53,21 @@ html { } &.textbox-question, &.dropdown-question { + input:hover { + box-shadow: 0px 0px 0px 4px $red-200; + border-radius: .5rem; + border: 1px solid $red; + } + input:focus { + box-shadow: 0 0 0 2.5px $red; + } p { color: $red; } input, select { - border: 1px solid $red; + border: 1px solid transparent; + box-shadow: 0 0 0 1px $red; &:focus { border: 1px solid transparent; } @@ -131,7 +142,6 @@ html { &.btn.btn-primary:hover, &.btn.btn-primary:focus, &.btn.btn-primary:focus-visible { - color: $gray !important; background: $gray-200; box-shadow: none; }