From 338d9b79356b2cc0e66ca7b4591e5b47da25362d Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Tue, 24 Jan 2023 15:55:13 -0500
Subject: [PATCH] Added onShownCallback property and handler

---
 src/digital-components/modal/modal.vue               |  5 ++++-
 .../service-zip-modal-question.vue                   | 12 +++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index da1fc8c26..013a42168 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -2,7 +2,7 @@
     <!-- Modal -->
     <div
         class="modal fade modal-component"
-        v-on="{ 'hidden.bs.modal': resetButtonStyle }"
+        v-on="{ 'hidden.bs.modal': resetButtonStyle, 'shown.bs.modal': onShownCallback }"
         :id="cmsWidgetName"
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
@@ -49,6 +49,9 @@ export default {
     name: "modal",
     props: {
         cmsWidgetName: String,
+        onShownCallback: {
+            type: Function,
+        },
 
         footerButtonCallback: {
             type: Function,
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index 47577a2ec..1ab55f165 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -13,13 +13,13 @@
                 href="#!"
                 data-bs-toggle="modal"
                 :data-bs-target="getModalId"
-                aria-label="Modal window"
-                @click-event="onModalOpen" />
+                aria-label="Modal window" />
         </div>
     </div>
     <modal
         ref="zipCodeInputModal"
         :cmsWidgetName="this.modalWidgetName"
+        :onShownCallback="onModalOpen"
         :footerButtonCallback="setZip">
         <div class="ps-4 pe-4 pb-4">
             <textboxQuestion
@@ -62,6 +62,7 @@ import textboxQuestion from "@/digital-components/textbox-question/textbox-quest
 import { defineRule } from "vee-validate";
 import { required, regex } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
+import { isNoUnitNumericStyleProp } from "@vue/shared";
 
 // Define Validation Rules
 defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@@ -104,7 +105,12 @@ export default {
             this.$refs.zipCodeInputModal.resetButtonStyle();
         },
 
-        focusOnZipInput() {},
+        focusOnZipInput() {
+            this.$nextTick(() => {
+                const input = this.$refs.zipInputTextQuestion.$refs.serviceZipCodeInput;
+                input.focus();
+            });
+        },
 
         onModalOpen() {
             this.serviceZipCodeInput = this.serviceZip;