From f7ab4ab503031042d7718fff3ef297a9808e0b87 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Tue, 20 Sep 2022 11:18:18 -0400
Subject: [PATCH] CSR-762 Fix keyboard navigation

---
 .../input-button-wrapper.vue                  | 83 ++++++++++++-------
 src/layouts/vehicle-damage/vehicle-damage.vue | 18 ++--
 2 files changed, 64 insertions(+), 37 deletions(-)

diff --git a/src/common-components/input-button-wrapper/input-button-wrapper.vue b/src/common-components/input-button-wrapper/input-button-wrapper.vue
index 356126e3c..e8a5e1a2c 100644
--- a/src/common-components/input-button-wrapper/input-button-wrapper.vue
+++ b/src/common-components/input-button-wrapper/input-button-wrapper.vue
@@ -3,6 +3,7 @@
     :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
     :for="buttonId"
   >
+    selectOnKeypress: {{ selectOnKeypress }}
     <!-- classes: {{classes}}<br/>
     value: {{value}} <br/>
     modelValue: {{modelValue}} <br/>
@@ -83,10 +84,10 @@ export default {
     console.log({
       isChecked: this.isChecked,
       modelValue: this.modelValue,
-      value: this.value
-    })
+      value: this.value,
+    });
 
-    this.handleChange(this.modelValue)
+    this.handleChange(this.modelValue);
   },
   methods: {
     handleEventAction(eventType, e) {
@@ -101,31 +102,57 @@ export default {
         hasFirstEventFired: this.hasFirstEventFired,
       });
 
-      if (this.isMultiSelect) {
-        // if (true) {
-          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.hasFirstEventFired) {
-          //   this.hasFirstEventFired = eventType === eventTypes.CHANGE;
-          // }
-        // }
-      } else {
-        this.handleClick(e);
+      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) {
+      //   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;
+      //   }
+      // } else {
+      //   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.hasFirstEventFired) {
 
       // else {
@@ -205,7 +232,7 @@ export default {
 
         this.valueToEmit = newValue;
       } else {
-        console.log("not multi")
+        console.log("not multi");
         this.valueToEmit = this.value;
       }
 
@@ -241,7 +268,7 @@ export default {
       if (this.isMultiSelect || this.modelValue instanceof Array) {
         return this.modelValue.includes(this.value);
       }
-      
+
       return this.modelValue == this.value;
     },
     inputType() {
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 881b2fa45..bd766816d 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -47,14 +47,14 @@
             v-show="!hasRepairReplaceConflict"
             :selectedDamageLocations="selectedDamageLocations"
           />
-          <!-- <replaceOptionsQuestion
+          <replaceOptionsQuestion
             ref="backGlassOptions"
             cmsWidgetName="RearReplaceOptionsQuestion"
             :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
             v-model="selectedRearReplaceOptions"
             groupName="BackGlassReplaceOptionsQuestion"
             validationRules="replace-options-required"
-          /> -->
+          />
           <funnel-footer
             cmsWidgetName="FunnelFooterWidget"
             :isForwardActionDisabled="!meta.valid"
@@ -127,15 +127,15 @@ export default {
       vm.$refs.damageLocation.initializeComponent(
         resultMap.damageOptions
       );
-      // vm.$refs.sideDoorOptions.initializeComponent(
-      //   resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
-      // );
+      vm.$refs.sideDoorOptions.initializeComponent(
+        resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
+      );
       vm.$refs.windshieldOptions.initializeComponent(
         resultMap.damageOptions.windshieldOptions.availableReplacementOptions
       );
-      // vm.$refs.backGlassOptions.initializeComponent(
-      //   resultMap.damageOptions.backGlassOptions.availableReplacementOptions
-      // );
+      vm.$refs.backGlassOptions.initializeComponent(
+        resultMap.damageOptions.backGlassOptions.availableReplacementOptions
+      );
 
 
     });
@@ -406,7 +406,7 @@ export default {
     sideDoorOptions,
     damageLocationQuestion,
     windshieldOptions,
-    // replaceOptionsQuestion,
+    replaceOptionsQuestion,
     Form,
     alert,
   },