Merge pull request #1863 from Safelite/feature/CSR-2065
Feature/csr 2065
This commit is contained in:
commit
65a0327a0f
1 changed files with 59 additions and 39 deletions
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
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 +291,25 @@ export default {
|
|||
// });
|
||||
|
||||
this.addressField1.addEventListener("input", (e) => {
|
||||
console.log(`input event`);
|
||||
console.log(e);
|
||||
// console.log(`input event`);
|
||||
// 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.showAddressFields = true;
|
||||
//this.addressField1.dispatchEvent(new Event("change"))
|
||||
this.unloadAutocomplete();
|
||||
}
|
||||
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.classList.remove("has-icon");
|
||||
//this.addressField1.dispatchEvent(new Event("change"))
|
||||
this.unloadAutocomplete();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
disableAutoFill() {
|
||||
|
|
@ -448,24 +455,37 @@ export default {
|
|||
}
|
||||
|
||||
// Temporary
|
||||
const element = document.getElementsByClassName("address-questions")[0];
|
||||
element.addEventListener("change", (e) => {
|
||||
console.log(`change event`);
|
||||
console.log(e);
|
||||
if (this.showAddressFields) {
|
||||
return false;
|
||||
}
|
||||
// const element = document.getElementsByClassName("address-questions")[0];
|
||||
// element.addEventListener(
|
||||
// "change",
|
||||
// (e) => {
|
||||
// // console.log(`change event`);
|
||||
// // console.log(e);
|
||||
|
||||
let autoFilledInputs = [];
|
||||
autoFilledInputs = element.querySelectorAll("input:-webkit-autofill");
|
||||
// if (this.showAddressFields) {
|
||||
// return false;
|
||||
// }
|
||||
|
||||
this.showAddressFields = autoFilledInputs.length > 0;
|
||||
if (this.showAddressFields) {
|
||||
this.unloadAutocomplete();
|
||||
}
|
||||
// let autoFilledInputs = [];
|
||||
// autoFilledInputs = element.querySelectorAll("input:-webkit-autofill");
|
||||
|
||||
this.addressField1.classList.remove("has-icon");
|
||||
});
|
||||
// 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.
|
||||
|
|
|
|||
Loading…
Reference in a new issue