From bb2a79d9c245b6e47b6776ac838c555c305bad02 Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Tue, 17 May 2022 09:15:56 -0400
Subject: [PATCH] CSR-588 Fix autocomplete results box to the input field on
 scroll

---
 .../address-questions/address-questions.vue   | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 4408a803f..749838429 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -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">
@@ -181,6 +181,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() {
@@ -281,4 +286,15 @@ export default ({
 		alert,
 	}
 })
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss">
+#streetAddressField {
+	position: relative;
+
+	.pac-container {
+		top: 76px !important;	// Height of #streetAddressField
+		left: 0 !important;
+	}
+}
+</style>
\ No newline at end of file