jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Testing something to fix autofill / autocomplete on Chrome iOS

Browse source
This commit is contained in:
Leah Schumann 2024-05-22 10:08:13 -04:00
parent 91dc1b8d03
commit effd9ed7f6
1 changed files with 42 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/fmg-components/address-questions/address-questions.vue
View file

@ -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) {
@ -270,13 +279,36 @@ export default {
}
});
// 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");
// // 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) =>
component.types.find((type) => type == componentName)
@ -415,11 +447,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) {