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"); return document.getElementById("autocomplete");
}, },
}, },
isTouchDevice: {
get: function () {
return (
"ontouchstart" in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0
);
},
},
}, },
methods: { methods: {
loadGooglePlacesAutocompleteScript() { loadGooglePlacesAutocompleteScript() {
@ -256,8 +265,8 @@ export default {
// When the user presses a key in the Street Address field, immediately disable autocomplete for that field. // 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 // 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. ¯\_(ツ)_/¯ // then set it to "new-password" which does disable it on both WebKit and FireFox. ¯\_(ツ)_/¯
this.addressField1.setAttribute("autocomplete", "off"); // this.addressField1.setAttribute("autocomplete", "off");
this.addressField1.setAttribute("autocomplete", "new-password"); // this.addressField1.setAttribute("autocomplete", "new-password");
// If a match has been previously attempted then do nothing // If a match has been previously attempted then do nothing
if (this.matchFound !== null) { 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 // // When clicking anywhere outside of the street address field we want to trigger place_changed
document.addEventListener("mouseup", (e) => { // document.addEventListener("mouseup", (e) => {
if (e.target.id != "autocomplete" && this.addressField1.value !== "") { // if (e.target.id != "autocomplete" && this.addressField1.value !== "") {
window.google.maps.event.trigger(this.autocomplete, "place_changed"); // 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) { findAddressComponentByType(place, componentName, componentLength) {
const component = place.address_components.find((component) => const component = place.address_components.find((component) =>
component.types.find((type) => type == componentName) component.types.find((type) => type == componentName)
@ -415,11 +447,12 @@ export default {
const element = document.getElementsByClassName("address-questions")[0]; const element = document.getElementsByClassName("address-questions")[0];
element.addEventListener("change", (e) => { element.addEventListener("change", (e) => {
if (this.showAddressFields) {
return false;
}
let autoFilledInputs = []; let autoFilledInputs = [];
autoFilledInputs = element.querySelectorAll("input:-webkit-autofill"); autoFilledInputs = element.querySelectorAll("input:-webkit-autofill");
if (this.showAddressFields) {
return;
}
this.showAddressFields = autoFilledInputs.length > 0; this.showAddressFields = autoFilledInputs.length > 0;
if (this.showAddressFields) { if (this.showAddressFields) {