CSR-762 Split windshield

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

@@ -22,6 +22,7 @@
         :role="isMultiSelect ? 'group' : 'radiogroup'"
         :aria-labelledby="formatString(groupName)"
       >
+      BQ selectOnKeypress: {{selectOnKeypress}}
         <legend
           class="sr-only"
           :data-focus-target="formatString(groupName)"
@@ -116,6 +117,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import { ErrorMessage } from "vee-validate";
 import radio from "@/ux-components/radio/radio";
+import { bool } from "yup";
 // import buttonWrap
 
 export default {
@@ -152,7 +154,10 @@ export default {
     suppressError: Boolean,
     useTextForValue: Boolean,
     valueToLogType: String,
-    selectOnKeypress: Boolean,
+    selectOnKeypress: {
+      type: Boolean,
+      default: true
+    },
   },
   computed: {
     getFieldSetClasses() {

src/common-components/input-button-wrapper/input-button-wrapper.vue

@@ -4,7 +4,8 @@
     :for="buttonId"
     @mousedown.left="handleEventAction('click', $event)"
   >
-    selectOnKeypress: {{ selectOnKeypress }}
+    <!-- IBW modelValue: {{ modelValue }} <br />
+    IBW value: {{value}} <br/> -->
     <!-- classes: {{classes}}<br/>
     value: {{value}} <br/>
     modelValue: {{modelValue}} <br/>
@@ -73,7 +74,10 @@ export default {
     buttonWrapperClasses: [String, Array, Object],
     inputClasses: [String, Array, Object],
     valueToLogType: String,
-    selectOnKeypress: Boolean,
+    selectOnKeypress: {
+      type: Boolean,
+      default: true
+    },
   },
   data() {
     return {
@@ -82,11 +86,11 @@ export default {
     };
   },
   mounted() {
-    console.log({
+    // console.log({
-      isChecked: this.isChecked,
+    //   isChecked: this.isChecked,
-      modelValue: this.modelValue,
+    //   modelValue: this.modelValue,
-      value: this.value,
+    //   value: this.value,
-    });
+    // });
 
     this.handleChange(this.modelValue);
   },
@@ -100,24 +104,9 @@ export default {
 
       console.log({
         handleKeypress: eventType,
-        hasFirstEventFired: this.hasFirstEventFired,
+        // hasFirstEventFired: this.hasFirstEventFired,
       });
 
-      // switch (eventType) {
-      //   case eventTypes.CLICK:
-      //   case eventTypes.KEYPRESS_SUBMIT:
-      //     console.log("clicking");
-      //     this.hasFirstEventFired = true;
-      //     this.handleClick(e);
-      //     break;
-      //   case eventTypes.CHANGE:
-      //     console.log("selectOnKeypress: ", this.selectOnKeypress);
-      //     this.hasFirstEventFired = false;
-      //     this.selectOnKeypress
-      //       ? this.handleClick(e)
-      //       : this.handleSelectionChange(e);
-      //     break;
-      // }
 
       if (this.isMultiSelect) {
         // if (true) {

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="damage-location-question">
-        DLQ selectedValue: {{selectedValue}}
         <buttonQuestion
             :questionText="questionText"
             isMultiSelect
@@ -9,7 +8,6 @@
             buttonType="listCard"
             isRequired
             v-model="selectedValue"
-            :selectOnKeypress="true"
             validationRules="damage-location-required"
         />
     </div>

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -1,6 +1,8 @@
 <template>
     <transition name="fade" mode="out-in">
         <div v-if="shouldDisplayReplaceOptionsQuestion" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
+            ROQ selectedValue: {{selectedValue}}<br/>
+            ROQ modelValue: {{modelValue}}
             <buttonQuestion
                 isWide
                 :questionText="questionText"
@@ -25,7 +27,7 @@ import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
 export default ({
     name: "replaceOptionsQuestion",
     mixins: [buttonQuestionWrapperMixin],
-    data(){
+    data() {
         return {
             replaceOptions: [],
         }
@@ -49,7 +51,7 @@ export default ({
             // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
             // ex: BackGlass stationary
             // console.log(this.answersToDisplay)
-            if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
+            if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
                 this.selectedValue = [this.answersToDisplay[0].Name];
                 console.log("HIIIIII2", this.selectedValue)
             }

src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -9,7 +9,6 @@
                 v-model="selectedValue"
                 :suppressError="suppressError"
                 :validationRules="validationRules"
-                :selectOnKeypress="true"
                 isRequired
             />
         </div>

src/layouts/vehicle-damage/windshield-options/windshield-options.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="windshield-options">
         selectedDamageLocations: {{ selectedDamageLocations }}
-        selectedWindshieldDamageTypeValue: {{selectedWindshieldDamageTypeValue}}
         <windshieldDamageTypeQuestion cmsWidgetName="WindshieldDamageTypeQuestion"
             :isAvailable="isWindshieldDamageLocation"
             :suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
@@ -22,7 +21,7 @@
             v-model="selectedWindshieldChipCountValues"
             validationRules="windshield-chip-count-required"
         />
-        
+        selectedWindshieldReplaceOptionsValues: {{selectedWindshieldReplaceOptionsValues}}
         <replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion"
             :isAvailable="isReplaceOptionSelected"
             isMultiSelect

src/layouts/vehicle-make/make-question/make-question.vue

@@ -8,6 +8,7 @@
     groupName="ChooseVehicleMake"
     textPosition="text-start"
     v-model="selectedValue"
+    :selectOnKeypress="true"
     isRequired
   />
 </template>

src/layouts/vehicle-model/model-question/model-question.vue

@@ -8,6 +8,7 @@
     groupName="ChooseVehicleModel"
     textPosition="text-start"
     v-model="selectedValue"
+    :selectOnKeypress="true"
     isRequired
   />
 </template>

src/layouts/vehicle-style/style-question/style-question.vue

@@ -8,6 +8,7 @@
     groupName="ChooseVehicleStyle"
     textPosition="text-start"
     v-model="selectedValue"
+    :selectOnKeypress="true"
     isRequired
   />
 </template>

src/layouts/vehicle-year/year-question/year-question.vue

@@ -9,6 +9,7 @@
       groupName="ChooseVehicleYear"
       textPosition="text-start"
       v-model="selectedValue"
+      :selectOnKeypress="true"
       isRequired
     />
   </div>

src/ux-components/list-button-horizontal/list-button-horizontal.vue

@@ -43,6 +43,7 @@ export default {
   name: "listButtonHorizontal",
   props: {
     isMultiSelect: Boolean,
+    selectOnKeypress: Boolean,
     groupName: String,
     buttonID: String,
     buttonLabel: String,

src/ux-components/list-card/list-card.vue

@@ -12,7 +12,6 @@
     :selectOnKeypress="selectOnKeypress"
     @change="handleAnswerChange"
   >
-
     <!-- <div :class="{ 'h-100': !isWide }">
       <div
         class="list-card w-100 rounded-3 d-flex align-items-center"