From f5cace864108307544f318d62e1551dd8730b9c7 Mon Sep 17 00:00:00 2001
From: latin-panda <66472237+latin-panda@users.noreply.github.com>
Date: Sun, 9 Feb 2025 20:20:07 -0600
Subject: [PATCH] Implements saving when control leaves the viewport as the
 user scrolls

---
 .../components/controls/Input/InputGeopoint.vue   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/web-forms/src/components/controls/Input/InputGeopoint.vue b/packages/web-forms/src/components/controls/Input/InputGeopoint.vue
index 45e21582..0ad54911 100644
--- a/packages/web-forms/src/components/controls/Input/InputGeopoint.vue
+++ b/packages/web-forms/src/components/controls/Input/InputGeopoint.vue
@@ -90,6 +90,16 @@ const isLocating = computed(() => {
 	return watchID.value !== null;
 });
 
+const controlElement = ref<HTMLElement | null>(null);
+const observer = new IntersectionObserver(
+	([entry]) => {
+		if (!entry.isIntersecting) {
+			save();
+		}
+	},
+	{ threshold: 0.6 }
+);
+
 const start = () => {
 	geoLocationError.value = false;
 	if (watchID.value) {
@@ -114,6 +124,8 @@ const start = () => {
 		},
 		{ enableHighAccuracy: true }
 	);
+
+	observer?.observe(controlElement.value);
 };
 
 const stop = () => {
@@ -123,6 +135,7 @@ const stop = () => {
 
 	navigator.geolocation.clearWatch(watchID.value);
 	watchID.value = null;
+	observer?.disconnect();
 };
 
 const save = () => {
@@ -145,7 +158,7 @@ const formatNumber = (num: number) => {
 </script>
 
 <template>
-	<div class="geolocation-control">
+	<div class="geolocation-control" ref="controlElement">
 		<Button
 			v-if="value === null && !isLocating"
 			rounded