Added 'nextTick'

This commit is contained in:
Leah Schumann 2024-05-23 08:15:06 -04:00
parent 2db671380a
commit 444296eae1

View file

@ -259,7 +259,7 @@ export default {
if (autocompleteResultsContainer) { if (autocompleteResultsContainer) {
streetAddressField.appendChild(autocompleteResultsContainer); streetAddressField.appendChild(autocompleteResultsContainer);
} }
}); }, { once: true });
this.addressField1.addEventListener("keydown", (e) => { this.addressField1.addEventListener("keydown", (e) => {
// 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.
@ -287,22 +287,27 @@ export default {
// }); // });
this.addressField1.addEventListener("input", (e) => { this.addressField1.addEventListener("input", (e) => {
console.log(`input event`); // console.log(`input event`);
console.log(e); // console.log(e);
this.$nextTick(() => {
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.showAddressFields = true;
//this.addressField1.dispatchEvent(new Event("change"))
this.unloadAutocomplete();
}
});
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.showAddressFields = true;
//this.addressField1.dispatchEvent(new Event("change"))
this.unloadAutocomplete();
}
}); });
}, },
disableAutoFill() { disableAutoFill() {
@ -450,8 +455,9 @@ export default {
// Temporary // Temporary
const element = document.getElementsByClassName("address-questions")[0]; const element = document.getElementsByClassName("address-questions")[0];
element.addEventListener("change", (e) => { element.addEventListener("change", (e) => {
console.log(`change event`); // console.log(`change event`);
console.log(e); // console.log(e);
if (this.showAddressFields) { if (this.showAddressFields) {
return false; return false;
} }
@ -459,13 +465,25 @@ export default {
let autoFilledInputs = []; let autoFilledInputs = [];
autoFilledInputs = element.querySelectorAll("input:-webkit-autofill"); autoFilledInputs = element.querySelectorAll("input:-webkit-autofill");
this.showAddressFields = autoFilledInputs.length > 0;
console.log(this.addressModel.city);
this.$nextTick(() => {
this.showAddressFields = autoFilledInputs.length > 0;
console.log(this.addressModel.city);
console.log(document.getElementById("city").value)
})
console.log(this.addressModel.city);
console.log(document.getElementById("city").value)
if (this.showAddressFields) { if (this.showAddressFields) {
this.unloadAutocomplete(); this.unloadAutocomplete();
} }
this.addressField1.classList.remove("has-icon"); this.addressField1.classList.remove("has-icon");
}); },
// { once: true }
);
}, },
beforeUpdate() { beforeUpdate() {
// It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal. // It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal.