From aa780e2c0200638444c884ff34f1af635d52ffaf Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 24 Jul 2023 11:31:35 -0400
Subject: [PATCH 1/4] format before code

---
 .../textbox-question/textbox-question.vue     | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 4bece84c..333dd6ec 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -74,20 +74,20 @@ export default {
     props: {
         type: {
             type: String,
-            default: 'text'
+            default: 'text',
         },
         placeholderText: {
             type: String,
-            default: ''
+            default: '',
         },
         displayQuestionText: {
             type: Boolean,
-            default: true
+            default: true,
         },
         modelValue: String,
         inputId: {
             type: String,
-            required: true
+            required: true,
         },
         isDisabled: Boolean,
         isRequired: Boolean,
@@ -96,7 +96,7 @@ export default {
         hasError: Boolean,
         mask: {
             type: String,
-            default: ''
+            default: '',
         },
         validationRules: String,
         cmsWidgetName: String,
@@ -107,7 +107,7 @@ export default {
         includeSelectIcon: Boolean,
         min: String,
         max: String,
-        disableAutoFill: Boolean
+        disableAutoFill: Boolean,
     },
     emits: ['focus', 'update:modelValue', 'textboxQuestionEvent.inputIdAssigned'],
     setup(props) {
@@ -116,12 +116,12 @@ export default {
         let initialValue;
 
         switch (typeof modelValue) {
-        case 'number':
-            initialValue = modelValue;
-            break;
-        default:
-            initialValue = modelValue && modelValue.length > 0 ? modelValue : '';
-            break;
+            case 'number':
+                initialValue = modelValue;
+                break;
+            default:
+                initialValue = modelValue && modelValue.length > 0 ? modelValue : '';
+                break;
         }
 
         const fieldOptions = {
@@ -141,7 +141,7 @@ export default {
             handleChange,
             validate,
             meta,
-            errors
+            errors,
         };
     },
     computed: {
@@ -154,7 +154,7 @@ export default {
             },
             set(newValue) {
                 this.$emit('update:modelValue', newValue);
-            }
+            },
         },
         labelText: {
             get() {
@@ -167,7 +167,7 @@ export default {
                         word = [
                             word.toString().slice(0, position),
                             noBreakChar,
-                            word.toString().slice(position)
+                            word.toString().slice(position),
                         ].join('');
                         questionText += `${word} `;
                     });
@@ -178,8 +178,8 @@ export default {
                 }
 
                 return questionText;
-            }
-        }
+            },
+        },
     },
     watch: {
         async value(newValue) {
@@ -217,7 +217,7 @@ input[type="date"]::-webkit-inner-spin-button {
     display: none;
 }
 
-input[type="date"]::-webkit-calendar-picker-indicator {
+input[type='date']::-webkit-calendar-picker-indicator {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -256,10 +256,10 @@ input[type="date"]::-webkit-calendar-picker-indicator {
     .input-wrapper {
         position: relative;
         &.has-search-icon {
-            input[type="text"] {
+            input[type='text'] {
                 border-radius: 50rem;
             }
-            button[type="submit"] {
+            button[type='submit'] {
                 position: absolute;
                 top: 50%;
                 transform: translateY(-50%);
@@ -277,7 +277,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
             }
         }
         &.has-select-icon {
-            button[type="submit"] {
+            button[type='submit'] {
                 position: absolute;
                 top: 50%;
                 transform: translateY(-50%);

From 9508df16994515a9b98456282e140d53ffb923a6 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 24 Jul 2023 12:21:57 -0400
Subject: [PATCH 2/4] starting to think the paste and lazy issues were
 connected.

---
 .../textbox-question/textbox-question.vue     | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 333dd6ec..92b7deca 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -13,7 +13,7 @@
             class="input-wrapper"
             :class="[
                 includeSearchIcon ? 'has-search-icon' : '',
-                includeSelectIcon ? 'has-select-icon' : '',
+                includeSelectIcon ? 'has-select-icon' : ''
             ]">
             <input
                 :id="inputId"
@@ -34,7 +34,7 @@
                 :class="[
                     hasIcon ? 'has-icon' : '',
                     iconRight ? 'icon-right' : '',
-                    cornerStyle === 'rounded' ? 'rounded-pill' : '',
+                    cornerStyle === 'rounded' ? 'rounded-pill' : ''
                 ]"
                 :validationRules="validationRules"
                 :maxlength="maxLength ? maxLength : '999'"
@@ -74,20 +74,20 @@ export default {
     props: {
         type: {
             type: String,
-            default: 'text',
+            default: 'text'
         },
         placeholderText: {
             type: String,
-            default: '',
+            default: ''
         },
         displayQuestionText: {
             type: Boolean,
-            default: true,
+            default: true
         },
         modelValue: String,
         inputId: {
             type: String,
-            required: true,
+            required: true
         },
         isDisabled: Boolean,
         isRequired: Boolean,
@@ -96,7 +96,7 @@ export default {
         hasError: Boolean,
         mask: {
             type: String,
-            default: '',
+            default: ''
         },
         validationRules: String,
         cmsWidgetName: String,
@@ -107,7 +107,7 @@ export default {
         includeSelectIcon: Boolean,
         min: String,
         max: String,
-        disableAutoFill: Boolean,
+        disableAutoFill: Boolean
     },
     emits: ['focus', 'update:modelValue', 'textboxQuestionEvent.inputIdAssigned'],
     setup(props) {
@@ -141,7 +141,7 @@ export default {
             handleChange,
             validate,
             meta,
-            errors,
+            errors
         };
     },
     computed: {
@@ -154,7 +154,7 @@ export default {
             },
             set(newValue) {
                 this.$emit('update:modelValue', newValue);
-            },
+            }
         },
         labelText: {
             get() {
@@ -167,7 +167,7 @@ export default {
                         word = [
                             word.toString().slice(0, position),
                             noBreakChar,
-                            word.toString().slice(position),
+                            word.toString().slice(position)
                         ].join('');
                         questionText += `${word} `;
                     });
@@ -178,8 +178,8 @@ export default {
                 }
 
                 return questionText;
-            },
-        },
+            }
+        }
     },
     watch: {
         async value(newValue) {

From 8da0dba4585adf80f9ddc1594dde85ef9375f7d0 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 24 Jul 2023 14:35:38 -0400
Subject: [PATCH 3/4] formatting before re-coding

---
 .../textbox-question/textbox-question.vue     | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 92b7deca..8a444c01 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -1,7 +1,5 @@
 <template>
-    <div
-        class="textbox-question"
-        :class="(errors && errors.length) || hasError ? 'has-error' : ''">
+    <div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
         <label
             v-if="displayQuestionText"
             :for="inputId"
@@ -45,10 +43,7 @@
                 @focus="$emit('focus', $event.target.value)"
                 @paste="trimOnPaste"
                 @drop="trimOnPaste" />
-            <button
-                v-if="includeSearchIcon"
-                type="submit"
-                aria-label="Search button" />
+            <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
             <button
                 v-if="includeSelectIcon"
                 type="submit"
@@ -56,12 +51,8 @@
                 :data-bs-target="'#' + cmsWidgetName"
                 aria-label="Select button" />
         </div>
-        <div
-            v-show="errorMessage"
-            class="row my-1 form-test-error">
-            <span
-                class="d-inline-flex mt-0"
-                role="alert">{{ errorMessage }}</span>
+        <div v-show="errorMessage" class="row my-1 form-test-error">
+            <span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
         </div>
     </div>
 </template>
@@ -131,9 +122,11 @@ export default {
         };
 
         // eslint-disable-next-line no-shadow
-        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(props.inputId,
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors } = useField(
+            props.inputId,
             props.validationRules,
-            fieldOptions);
+            fieldOptions
+        );
 
         return {
             errorMessage,
@@ -213,7 +206,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-input[type="date"]::-webkit-inner-spin-button {
+input[type='date']::-webkit-inner-spin-button {
     display: none;
 }
 

From 0bb54a3662991861872f895d050bd2dddc15535a Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Mon, 24 Jul 2023 16:14:07 -0400
Subject: [PATCH 4/4] Updated paste custom logic.

---
 .../textbox-question/textbox-question.vue       | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 8a444c01..03538e54 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -188,18 +188,29 @@ export default {
     methods: {
         trimOnPaste(evt) {
             evt.stopPropagation();
+            evt.preventDefault();
+
+            const input = document.getElementById(evt.srcElement.id);
+            const originalValue = input.value;
+            const startPosition = input.selectionStart;
+            const endPosition = input.selectionEnd;
+            const selectionLength = endPosition - startPosition;
 
             let data = null;
             if (evt.type === 'paste') {
                 data = evt.clipboardData || window.clipboardData;
             } else {
-                evt.preventDefault();
                 data = evt.dataTransfer;
             }
 
-            const value = data.getData('Text')?.trim();
+            const textValue = data.getData('Text');
 
-            this.$emit('update:modelValue', value);
+            // 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);
         }
     }
 };