jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #457 from Safelite/feature/CSR-588

Browse source 
CSR-588 Fix autocomplete results box to the input field on scroll
This commit is contained in:
katieoh-safelite 2022-05-17 10:23:32 -04:00 committed by GitHub
commit 9fcabdf064
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="row mt-2 mb-4">
<div class="col">
<textboxQuestion cmsWidgetName="StreetAddressQuestionWidget" v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill validationRules="street-address-required" />
<textboxQuestion id="streetAddressField" cmsWidgetName="StreetAddressQuestionWidget" v-model="addressModel.streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" aria-haspopup="" hasIcon disableAutoFill validationRules="street-address-required" />
</div>
</div>
<transition name="fade" mode="out-in">
@ -183,6 +183,11 @@ export default ({
// https://stackoverflow.com/a/30976223
addressField1.addEventListener("focus", () => {
addressField1.setAttribute("autocomplete", "do-not-autofill");
// Make place results box stick to the input on scroll
const streetAddressField = document.getElementById("streetAddressField");
const autocompleteResultsContainer = document.getElementsByClassName("pac-container")[0];
streetAddressField.appendChild(autocompleteResultsContainer);
})
addressField1.onchange = function() {
@ -292,4 +297,15 @@ export default ({
alert,
}
})
</script>
</script>
<style lang="scss">
#streetAddressField {
position: relative;
.pac-container {
top: 76px !important; // Height of #streetAddressField
left: 0 !important;
}
}
</style>