From 444296eae1cc600c20657249ab4bd3ec02603d30 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 23 May 2024 08:15:06 -0400 Subject: [PATCH 1/4] Added 'nextTick' --- .../address-questions/address-questions.vue | 58 ++++++++++++------- 1 file changed, 38 insertions(+), 20 deletions(-) diff --git a/src/fmg-components/address-questions/address-questions.vue b/src/fmg-components/address-questions/address-questions.vue index ebe9967fe..8f67fa48a 100644 --- a/src/fmg-components/address-questions/address-questions.vue +++ b/src/fmg-components/address-questions/address-questions.vue @@ -259,7 +259,7 @@ export default { if (autocompleteResultsContainer) { streetAddressField.appendChild(autocompleteResultsContainer); } - }); + }, { once: true }); this.addressField1.addEventListener("keydown", (e) => { // 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) => { - console.log(`input event`); - console.log(e); + // console.log(`input event`); + // 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() { @@ -450,8 +455,9 @@ export default { // Temporary const element = document.getElementsByClassName("address-questions")[0]; element.addEventListener("change", (e) => { - console.log(`change event`); - console.log(e); + // console.log(`change event`); + // console.log(e); + if (this.showAddressFields) { return false; } @@ -459,13 +465,25 @@ export default { let autoFilledInputs = []; 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) { this.unloadAutocomplete(); } this.addressField1.classList.remove("has-icon"); - }); + }, + // { once: true } + ); }, beforeUpdate() { // It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal. From 6e334c91d3cf64d6a4142bde2bff3a43f89a5c05 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 23 May 2024 08:20:51 -0400 Subject: [PATCH 2/4] Prettified --- .../address-questions/address-questions.vue | 73 ++++++++++--------- 1 file changed, 37 insertions(+), 36 deletions(-) diff --git a/src/fmg-components/address-questions/address-questions.vue b/src/fmg-components/address-questions/address-questions.vue index 8f67fa48a..77fabeebf 100644 --- a/src/fmg-components/address-questions/address-questions.vue +++ b/src/fmg-components/address-questions/address-questions.vue @@ -250,16 +250,20 @@ export default { // When the Street Address textbox receives focus, // append the search results list container to the bottom of the textbox // and disable browser autofill - this.addressField1.addEventListener("focus", (e) => { - // Make place results box stick to the input on scroll - const streetAddressField = document.getElementById("streetAddressField"); - const autocompleteResultsContainer = - document.getElementsByClassName("pac-container")[0]; + this.addressField1.addEventListener( + "focus", + (e) => { + // Make place results box stick to the input on scroll + const streetAddressField = document.getElementById("streetAddressField"); + const autocompleteResultsContainer = + document.getElementsByClassName("pac-container")[0]; - if (autocompleteResultsContainer) { - streetAddressField.appendChild(autocompleteResultsContainer); - } - }, { once: true }); + if (autocompleteResultsContainer) { + streetAddressField.appendChild(autocompleteResultsContainer); + } + }, + { once: true } + ); this.addressField1.addEventListener("keydown", (e) => { // When the user presses a key in the Street Address field, immediately disable autocomplete for that field. @@ -305,9 +309,6 @@ export default { this.unloadAutocomplete(); } }); - - - }); }, disableAutoFill() { @@ -454,36 +455,36 @@ export default { // Temporary const element = document.getElementsByClassName("address-questions")[0]; - element.addEventListener("change", (e) => { - // console.log(`change event`); - // console.log(e); + element.addEventListener( + "change", + (e) => { + // console.log(`change event`); + // console.log(e); - if (this.showAddressFields) { - return false; - } + if (this.showAddressFields) { + return false; + } - let autoFilledInputs = []; - autoFilledInputs = element.querySelectorAll("input:-webkit-autofill"); + let autoFilledInputs = []; + autoFilledInputs = element.querySelectorAll("input:-webkit-autofill"); - - 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) + 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) { - this.unloadAutocomplete(); + if (this.showAddressFields) { + this.unloadAutocomplete(); + } + + this.addressField1.classList.remove("has-icon"); } - - this.addressField1.classList.remove("has-icon"); - }, - // { once: true } - ); + // { once: true } + ); }, beforeUpdate() { // It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal. From 20dc07ad7df92f9c2ee28b74212d145818b14276 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 23 May 2024 08:48:52 -0400 Subject: [PATCH 3/4] Trying to show address when adding text by input when the inputType is autofill --- .../address-questions/address-questions.vue | 57 ++++++++++--------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/src/fmg-components/address-questions/address-questions.vue b/src/fmg-components/address-questions/address-questions.vue index 77fabeebf..7be0eed23 100644 --- a/src/fmg-components/address-questions/address-questions.vue +++ b/src/fmg-components/address-questions/address-questions.vue @@ -299,12 +299,13 @@ export default { case "insertText": case "insertFromPaste": case "deleteContentBackward": - // If the user enters text by typing, or pasting text, or deleting text already entered, disable *autofill* + // 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.showAddressFields = true; + this.addressField1.classList.remove("has-icon"); //this.addressField1.dispatchEvent(new Event("change")) this.unloadAutocomplete(); } @@ -454,37 +455,37 @@ export default { } // Temporary - const element = document.getElementsByClassName("address-questions")[0]; - element.addEventListener( - "change", - (e) => { - // console.log(`change event`); - // console.log(e); + // const element = document.getElementsByClassName("address-questions")[0]; + // element.addEventListener( + // "change", + // (e) => { + // // console.log(`change event`); + // // console.log(e); - if (this.showAddressFields) { - return false; - } + // if (this.showAddressFields) { + // return false; + // } - let autoFilledInputs = []; - autoFilledInputs = element.querySelectorAll("input:-webkit-autofill"); + // let autoFilledInputs = []; + // autoFilledInputs = element.querySelectorAll("input:-webkit-autofill"); - 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); + // 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) { - this.unloadAutocomplete(); - } + // if (this.showAddressFields) { + // this.unloadAutocomplete(); + // } - this.addressField1.classList.remove("has-icon"); - } - // { once: true } - ); + // this.addressField1.classList.remove("has-icon"); + // } + // // { once: true } + // ); }, beforeUpdate() { // It is necessary to set focus on the street address on this lifecycle hook when this component is used in a modal. From ac24ca69e089803a701612adeea6c3df571d8c38 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 23 May 2024 09:38:31 -0400 Subject: [PATCH 4/4] Prettified --- src/fmg-components/address-questions/address-questions.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fmg-components/address-questions/address-questions.vue b/src/fmg-components/address-questions/address-questions.vue index 7be0eed23..a0cc50f43 100644 --- a/src/fmg-components/address-questions/address-questions.vue +++ b/src/fmg-components/address-questions/address-questions.vue @@ -299,7 +299,7 @@ export default { case "insertText": case "insertFromPaste": case "deleteContentBackward": - // If the user enters text by typing, or pasting text, or deleting text already entered, disable *autofill* + // If the user enters text by typing, or pasting text, or deleting text already entered, disable *autofill* this.disableAutoFill(); break; default: