Change to injected callback pattern, from event pattern.

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

@@ -10,7 +10,7 @@
             class="input-wrapper"
             :class="[
                 includeSearchIcon ? 'has-search-icon' : '',
-                includeCameraIcon ? 'has-camera-icon' : '',
+                includeImageQuestion ? 'has-camera-icon' : '',
             ]">
             <input
                 class="form-control"
@@ -37,7 +37,9 @@
                 @focus="$emit('focus', $event.target.value)" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
             <template v-if="!isDisabled">
-                <label class="camera-icon-input" v-show="includeCameraIcon && !isImageLoading">
+                <label
+                    class="camera-icon-input"
+                    v-show="includeImageQuestion && !isImageProcessing">
                     <input
                         type="file"
                         id="vin-input"
@@ -47,7 +49,7 @@
                         @change="imageChanged" />
                 </label>
                 <loader
-                    v-show="includeCameraIcon && isImageLoading"
+                    v-show="includeImageQuestion && isImageProcessing"
                     loaderColor="blue"
                     class="loading-icon"></loader>
             </template>
@@ -92,13 +94,14 @@ export default {
         questionAlignment: String, // Left or center. Left is default.
         cornerStyle: String, // Rounded or square. Square is default.
         includeSearchIcon: Boolean,
-        includeCameraIcon: Boolean,
-        isImageLoading: Boolean,
+        includeImageQuestion: Boolean,
+        onImageQuestionSubmit: Function,
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
         const modelValue = propsClone.modelValue;
         let initialValue;
+        let isImageProcessing = ref(false);
 
         switch (typeof modelValue) {
             case "number":
@@ -128,12 +131,26 @@ export default {
             validate,
             meta,
             errors,
+            isImageProcessing,
         };
     },
     methods: {
-        imageChanged(e) {
-            this.$emit("fileChanged", e.target.files[0]);
-            e.target.value = null;
+        async imageChanged(e) {
+            this.isImageProcessing = true;
+
+            await this.onImageQuestionSubmit(e.target.files[0])
+                .then(async (response) => {
+                    this.value = response;
+
+                    await this.$nextTick();
+
+                    document.getElementById(this.inputId).dispatchEvent(new Event("change"));
+                })
+                .catch((error) => {
+                    this.$emit("imageLookupError");
+                });
+
+            this.isImageProcessing = false;
         },
     },
     computed: {

src/layouts/vin-lookup/vin-lookup.vue

@@ -19,10 +19,10 @@
                             validationRules="vin-required|vin-format"
                             :isDisabled="vinPopulatedOnPageLoad"
                             maxLength="17"
-                            includeCameraIcon
-                            @file-changed="submitImage"
                             :mask="vinMask"
-                            :isImageLoading="isVinLoading"
+                            includeImageQuestion
+                            :onImageQuestionSubmit="getVinFromImage"
+                            @image-lookup-error="displayVinScanAlert"
                             data-test="vin-lookup-field"
                             ref="vinLookupQuestion" />
                     </div>
@@ -398,26 +398,20 @@ export default {
         displayVinScanAlert() {
             this.displayVinScanFailedAlert = true;
         },
-        async submitImage(e) {
-            this.isVinLoading = true;
-            await this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, e)
-                .then(async (response) => {
-                    if (response.data.length > 0) {
-                        const result = response.data[0];
-
-                        this.vin = result;
-
-                        this.$refs.vinLookupQuestion.handleChange(result);
-
-                        this.resetAlerts();
-                    } else {
-                        this.displayVinScanAlert();
-                    }
-                })
-                .catch((error) => {
-                    this.displayVinScanAlert();
-                });
-            this.isVinLoading = false;
+        getVinFromImage(image) {
+            return new Promise((resolve, reject) => {
+                this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, image)
+                    .then((response) => {
+                        if (response.data.length > 0) {
+                            resolve(response.data[0]);
+                        } else {
+                            reject();
+                        }
+                    })
+                    .catch(() => {
+                        reject();
+                    });
+            });
         },
         resetAlerts() {
             this.displayMatchedDifferentVehicleAlert = false;