Latest auto-fill fix
This commit is contained in:
parent
cd930af6b8
commit
9846e1bf83
2 changed files with 11 additions and 2 deletions
|
|
@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue