Latest auto-fill fix

This commit is contained in:
Leah Schumann 2022-05-12 08:07:46 -04:00
parent cd930af6b8
commit 9846e1bf83
2 changed files with 11 additions and 2 deletions

View file

@ -1,6 +1,7 @@
<template> <template>
<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''"> <div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label> <label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
<!-- See https://stackoverflow.com/a/30976223 for information about "do-not-autofill" -->
<input <input
v-model="value" v-model="value"
v-maska="mask" v-maska="mask"
@ -13,7 +14,7 @@
:aria-disabled="isDisabled" :aria-disabled="isDisabled"
:disabled="isDisabled" :disabled="isDisabled"
:aria-required="isRequired" :aria-required="isRequired"
autocomplete="off" autocomplete="do-not-autofill"
:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
:validationRules="validationRules" :validationRules="validationRules"
/> />

View file

@ -175,6 +175,14 @@ export default ({
// Standard place_changed event handling // Standard place_changed event handling
autocomplete.addListener('place_changed', fillInAddress); autocomplete.addListener('place_changed', fillInAddress);
// Wrapping the addressField1 element in the Google Address Autocomplete object
// will cause "autocomplete='off'" which Chrome completely ignores. This event
// handler will set the value to something arbitrary so autofill doesn't work.
// https://stackoverflow.com/a/30976223
addressField1.addEventListener("focus", () => {
addressField1.setAttribute("autocomplete", "do-not-autofill");
})
addressField1.onchange = function() { addressField1.onchange = function() {
const hover = document.querySelector(".pac-container .pac-item:hover"); const hover = document.querySelector(".pac-container .pac-item:hover");
// if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place // if an item has been clicked, do nothing, otherwise get first solution and use Geocoder to get the place
@ -253,7 +261,7 @@ export default ({
.catch(() => { .catch(() => {
// Failed to fetch script // Failed to fetch script
console.log("Unable to load Google Places API script"); console.log("Unable to load Google Places API script");
}); });
} }
}, },
mounted() { mounted() {