CSR-762 Button click events firing correctly

This commit is contained in:
Katie 2022-09-28 13:14:44 -04:00
parent e8b751c1b7
commit 78151929c9
2 changed files with 66 additions and 43 deletions

View file

@ -2,7 +2,8 @@
<label
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:for="buttonId"
@mousedown.left="handleEventAction('click', $event)">
@mousedown.left="handleEventAction('click', $event)"
@keyup="handleKeyboardNavigation">
<input
:type="inputType"
:id="buttonId"
@ -13,7 +14,6 @@
:value="value"
:checked="isChecked"
@blur="handleBlur"
@focus="handleFocus"
@keypress.enter="handleEventAction('keypressSubmit', $event)"
@change="handleEventAction('change', $event)" />
@ -83,20 +83,16 @@ export default {
case eventTypes.KEYPRESS_SUBMIT:
case eventTypes.CHANGE:
this.handleClick(e);
window.lastFocusedInputGroup = this.groupName;
this.pushClickEventToGA();
break;
// this.selectOnKeypress
// ? this.handleClick(e)
// : this.handleSelectionChange(e);
// break;
}
} else {
switch (eventType) {
case eventTypes.CLICK:
console.log("RADIO CLICK");
// falls through. Keep this comment for the linter
case eventTypes.KEYPRESS_SUBMIT:
console.log("RADIO KEYPRESS CLICK");
this.handleClick(e);
this.test();
break;
case eventTypes.CHANGE:
this.selectOnKeypress
@ -130,27 +126,18 @@ export default {
},
handleClick(e) {
this.handleSelectionChange(e);
// console.log("clicked/selected: ", this.valueToEmit)
if (this.isMultiSelect) {
this.pushClickEventToGA();
}
this.$emit("buttonClicked", this.valueToEmit);
},
pushClickEventToGA(value) {
console.log("PUSHING: ", {
route: this.$route.query[queryStrings.FMG_PAGE],
value: value ?? this.value?.toString(),
valueToLogType: this.valueToLogType,
});
window.firedGaClickEventValues =
window.firedGaClickEventValues ?? {};
window.firedGaClickEventValues[window.lastFocusedInputGroup] =
value ?? this.value;
this.pushEventToGA(
this.$route.query[queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
value?.toString ?? this.value?.toString(),
value?.toString() ?? this.value?.toString(),
true,
this.valueToLogType
);
@ -159,32 +146,66 @@ export default {
window.lastFocusedInputGroup = this.groupName;
window.wasLastFocusedInputMultiselect = this.isMultiSelect;
},
handleFocus() {
console.log("FOCUS: ", {
currentlySelectedValues: window.currentlySelectedValues,
firedGaClickEventValues: window.firedGaClickEventValues,
lastFocusedInputGroup: window.lastFocusedInputGroup,
wasLastFocusedInputMultiselect:
window.wasLastFocusedInputMultiselect,
groupName: this.groupName,
});
if (
window.currentlySelectedValues &&
window.firedGaClickEventValues &&
window.lastFocusedInputGroup &&
!window.wasLastFocusedInputMultiselect &&
window.currentlySelectedValues[window.lastFocusedInputGroup] &&
window.lastFocusedInputGroup != this.groupName &&
window.firedGaClickEventValues[window.lastFocusedInputGroup] !=
handleKeyboardNavigation(key) {
this.test(key);
},
test(event) {
window.firedGaClickEventValues =
window.firedGaClickEventValues ?? {};
window.currentlySelectedValues =
window.currentlySelectedValues ?? {};
const keyCode = event?.code;
// Keyboard navigation
if (keyCode) {
if (
window.currentlySelectedValues &&
window.firedGaClickEventValues &&
window.lastFocusedInputGroup &&
!window.wasLastFocusedInputMultiselect &&
window.currentlySelectedValues[
window.lastFocusedInputGroup
] &&
window.firedGaClickEventValues[
window.lastFocusedInputGroup
] !=
window.currentlySelectedValues[
window.lastFocusedInputGroup
]
) {
if (keyCode === "Tab") {
this.pushClickEventToGA(
window.currentlySelectedValues[
window.lastFocusedInputGroup
]
);
} else if (keyCode?.includes("Arrow")) {
if (window.lastFocusedInputGroup != this.groupName) {
this.pushClickEventToGA(
window.currentlySelectedValues[
window.lastFocusedInputGroup
]
);
}
}
}
} else {
// Radio click
window.lastFocusedInputGroup = this.groupName;
if (
window.firedGaClickEventValues[
window.lastFocusedInputGroup
] !=
window.currentlySelectedValues[window.lastFocusedInputGroup]
) {
// TODO MAKE SURE THIS IS FIRING THE RIGHT VALUE
this.pushClickEventToGA(
window.currentlySelectedValues[window.lastFocusedInputGroup]
);
) {
this.pushClickEventToGA(
window.currentlySelectedValues[
window.lastFocusedInputGroup
]
);
}
}
},
test() {}
},
computed: {
isChecked() {

View file

@ -29,6 +29,8 @@ export default {
logCustomEvent(category, action, label, value) {
const currentPageName = getPageNameByQueryString();
console.log("PUSHING: ", label)
var payload = {
userId: getDeviceIdValue(),
sessionKey: getSessionKeyValue(),