CSR-762 Fix keyboard navigation

This commit is contained in:
Katie 2022-09-20 11:18:18 -04:00
parent 1a0f71f36f
commit f7ab4ab503
2 changed files with 64 additions and 37 deletions

View file

@ -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() {

View file

@ -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,
},