From 10104b849497e2d96542469b8133035f94ee9842 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Thu, 30 Nov 2023 15:55:56 -0500
Subject: [PATCH] input id must differ from all other ids

---
 .../textbox-question/textbox-question.vue     | 23 ++++++++++++++++---
 src/layouts/tpa-search/tpa-search.vue         |  4 ++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 7d74278f..86bcfeea 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -201,10 +201,27 @@ export default {
             evt.stopPropagation();
             evt.preventDefault();
 
-            const data = evt.type === 'paste' ? (evt.clipboardData || window.clipboardData) : evt.dataTransfer;
-            const value = data.getData('Text')?.trim();
+            const input = document.getElementById(evt.srcElement.id);
+            const originalValue = input.value;
+            const startPosition = input.selectionStart;
+            const endPosition = input.selectionEnd;
+            const selectionLength = endPosition - startPosition;
 
-            this.$emit('update:modelValue', this.modelValue + value);
+            let data = null;
+            if (evt.type === 'paste') {
+                data = evt.clipboardData || window.clipboardData;
+            } else {
+                data = evt.dataTransfer;
+            }
+
+            const textValue = data.getData('Text');
+
+            // Insert the pasted/dropped string at the index position
+            const arrOriginalString = originalValue.split('');
+            arrOriginalString.splice(startPosition, selectionLength, textValue);
+            const blendedString = arrOriginalString.join('');
+
+            this.$emit('update:modelValue', blendedString);
         },
         clickedSearch() {
             if (this.meta.valid) {
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index 537aa0e4..65e41ca0 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -26,7 +26,7 @@
                             <textboxQuestion
                                 id="tpaSearchQuestionField"
                                 v-model="zipCode"
-                                inputId="tpaSearchQuestionField"
+                                inputId="tpaSearchQuestionFieldInput"
                                 :cmsWidgetName="widget.tpaSearchQuestion"
                                 :includeSearchIcon="true"
                                 :displayQuestionText="false"
@@ -54,7 +54,7 @@
                             id="searchRadiusFilter"
                             v-model="filter"
                             :cmsWidgetName="widget.filterByQuestion"
-                            inputId="filterByQuestionField"
+                            inputId="searchRadiusFilterInput"
                             :options="filterOptions"
                             disableAutoFill
                             :isDisabled="reloadingProviders"