Merge pull request #1860 from Safelite/feature/CSR-2065
Feature/csr 2065
This commit is contained in:
commit
b9873013c1
2 changed files with 49 additions and 10 deletions
|
|
@ -204,23 +204,23 @@ describe("address-questions.vue", () => {
|
|||
|
||||
test("address field is typed into => disable autofill", async () => {
|
||||
// Arrange
|
||||
let keydownEventCallbackFunction;
|
||||
let inputEventCallbackFunction;
|
||||
autocompleteElement.addEventListener = jest
|
||||
.fn()
|
||||
.mockImplementation((eventName, callbackFunction) => {
|
||||
if (eventName == "keydown") {
|
||||
keydownEventCallbackFunction = callbackFunction;
|
||||
if (eventName == "input") {
|
||||
inputEventCallbackFunction = callbackFunction;
|
||||
}
|
||||
});
|
||||
const { wrapper } = setupMocks({});
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
const e = {
|
||||
code: "Enter",
|
||||
inputType: "insertText",
|
||||
};
|
||||
|
||||
// Act
|
||||
keydownEventCallbackFunction(e);
|
||||
inputEventCallbackFunction(e);
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
// Assert
|
||||
|
|
|
|||
|
|
@ -210,6 +210,15 @@ export default {
|
|||
return document.getElementById("autocomplete");
|
||||
},
|
||||
},
|
||||
isTouchDevice: {
|
||||
get: function () {
|
||||
return (
|
||||
"ontouchstart" in window ||
|
||||
navigator.maxTouchPoints > 0 ||
|
||||
navigator.msMaxTouchPoints > 0
|
||||
);
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
loadGooglePlacesAutocompleteScript() {
|
||||
|
|
@ -256,8 +265,8 @@ export default {
|
|||
// When the user presses a key in the Street Address field, immediately disable autocomplete for that field.
|
||||
// For some reason we have to explicitly tell FireFox to set it to "off" which doesn't actually disable autofill
|
||||
// then set it to "new-password" which does disable it on both WebKit and FireFox. ¯\_(ツ)_/¯
|
||||
this.addressField1.setAttribute("autocomplete", "off");
|
||||
this.addressField1.setAttribute("autocomplete", "new-password");
|
||||
// this.addressField1.setAttribute("autocomplete", "off");
|
||||
// this.addressField1.setAttribute("autocomplete", "new-password");
|
||||
|
||||
// If a match has been previously attempted then do nothing
|
||||
if (this.matchFound !== null) {
|
||||
|
|
@ -269,6 +278,35 @@ export default {
|
|||
window.google.maps.event.trigger(this.autocomplete, "place_changed");
|
||||
}
|
||||
});
|
||||
|
||||
// // When clicking anywhere outside of the street address field we want to trigger place_changed
|
||||
// document.addEventListener("mouseup", (e) => {
|
||||
// if (e.target.id != "autocomplete" && this.addressField1.value !== "") {
|
||||
// window.google.maps.event.trigger(this.autocomplete, "place_changed");
|
||||
// }
|
||||
// });
|
||||
|
||||
this.addressField1.addEventListener("input", (e) => {
|
||||
console.log(e);
|
||||
|
||||
switch (e.inputType) {
|
||||
case "insertText":
|
||||
case "insertFromPaste":
|
||||
case "deleteContentBackward":
|
||||
// If the user enters text by typing, or pasting text, or deleting text already entered, disable autofill
|
||||
this.disableAutoFill();
|
||||
break;
|
||||
default:
|
||||
// If the user enters text by *autofill* then disable the *autocomplete*
|
||||
this.unloadAutocomplete();
|
||||
}
|
||||
});
|
||||
},
|
||||
disableAutoFill() {
|
||||
// For some reason we have to explicitly tell FireFox to set it to "off" which doesn't actually disable autofill
|
||||
// then set it to "new-password" which does disable it for both WebKit and FireFox. ¯\_(ツ)_/¯
|
||||
this.addressField1.setAttribute("autocomplete", "off");
|
||||
this.addressField1.setAttribute("autocomplete", "new-password");
|
||||
},
|
||||
findAddressComponentByType(place, componentName, componentLength) {
|
||||
const component = place.address_components.find((component) =>
|
||||
|
|
@ -408,11 +446,12 @@ export default {
|
|||
|
||||
const element = document.getElementsByClassName("address-questions")[0];
|
||||
element.addEventListener("change", (e) => {
|
||||
if (this.showAddressFields) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let autoFilledInputs = [];
|
||||
autoFilledInputs = element.querySelectorAll("input:-webkit-autofill");
|
||||
if (this.showAddressFields) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.showAddressFields = autoFilledInputs.length > 0;
|
||||
if (this.showAddressFields) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue