CSR-762 Button click events firing correctly
This commit is contained in:
parent
e8b751c1b7
commit
78151929c9
2 changed files with 66 additions and 43 deletions
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ export default {
|
|||
logCustomEvent(category, action, label, value) {
|
||||
const currentPageName = getPageNameByQueryString();
|
||||
|
||||
console.log("PUSHING: ", label)
|
||||
|
||||
var payload = {
|
||||
userId: getDeviceIdValue(),
|
||||
sessionKey: getSessionKeyValue(),
|
||||
|
|
|
|||
Loading…
Reference in a new issue