From af337105d139933effd4fbb262d370b2e8d39752 Mon Sep 17 00:00:00 2001
From: Ronni Skansing <rskansing@gmail.com>
Date: Sat, 28 Mar 2026 15:17:09 +0100
Subject: [PATCH] refactor form components rendering

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
---
 .../src/lib/components/CheckboxField.svelte   | 17 +++++------
 frontend/src/lib/components/DateField.svelte  | 24 ++++++++--------
 .../src/lib/components/DateTimeField.svelte   | 28 +++++++++----------
 frontend/src/lib/components/FileField.svelte  | 23 ++++++++-------
 .../src/lib/components/PasswordField.svelte   | 19 ++++++-------
 frontend/src/lib/components/TextField.svelte  | 23 ++++++++-------
 .../components/TextFieldMultiSelect.svelte    | 20 ++++++-------
 .../components/TextFieldSearchSelect.svelte   | 21 ++++++--------
 .../src/lib/components/TextFieldSelect.svelte | 20 ++++++-------
 .../src/lib/components/TextareaField.svelte   | 19 ++++++-------
 .../form/TextFieldSelectWithType.svelte       | 20 ++++++-------
 .../src/lib/components/table/Table.svelte     |  2 +-
 .../table/TableDropDownEllipsis.svelte        | 10 ++++---
 13 files changed, 117 insertions(+), 129 deletions(-)

diff --git a/frontend/src/lib/components/CheckboxField.svelte b/frontend/src/lib/components/CheckboxField.svelte
index 5f28d40..a3db2b3 100644
--- a/frontend/src/lib/components/CheckboxField.svelte
+++ b/frontend/src/lib/components/CheckboxField.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { afterUpdate, onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import ToolTip from './ToolTip.svelte';
 
 	export let bindTo = null;
@@ -17,18 +17,15 @@
 		if (value === null) {
 			value = defaultValue;
 		}
-	});
 
-	afterUpdate(() => {
-		if (!parentForm) {
-			parentForm = bindTo.closest('form');
-			if (!parentForm) {
-				return;
-			}
-			parentFormResetListener = parentForm.addEventListener('reset', (event) => {
+		parentForm = bindTo?.closest('form');
+		if (parentForm) {
+			// store the handler reference so it can be properly removed later
+			parentFormResetListener = (event) => {
 				event.preventDefault();
 				value = defaultValue;
-			});
+			};
+			parentForm.addEventListener('reset', parentFormResetListener);
 		}
 	});
 
diff --git a/frontend/src/lib/components/DateField.svelte b/frontend/src/lib/components/DateField.svelte
index 8089d08..d643989 100644
--- a/frontend/src/lib/components/DateField.svelte
+++ b/frontend/src/lib/components/DateField.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { afterUpdate, onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import ToolTip from './ToolTip.svelte';
 	import { addToast } from '$lib/store/toast';
 	import { utc_yyyy_mm_dd } from '$lib/utils/api-utils';
@@ -30,22 +30,22 @@
 		value = utc_yyyy_mm_dd(value);
 	}
 
-	afterUpdate(() => {
-		// handle reset
-		if (!parentForm && resets) {
-			parentForm = bindTo.closest('form');
-			if (!parentForm) {
-				return;
+	onMount(() => {
+		if (resets) {
+			parentForm = bindTo?.closest('form');
+			if (parentForm) {
+				// store the handler reference so it can be properly removed later
+				parentFormResetListener = (event) => {
+					event.preventDefault();
+					value = defaultValue;
+				};
+				parentForm.addEventListener('reset', parentFormResetListener);
 			}
-			parentFormResetListener = parentForm.addEventListener('reset', (event) => {
-				event.preventDefault();
-				value = defaultValue;
-			});
 		}
 	});
 
 	onDestroy(() => {
-		if (parentFormResetListener && resets) {
+		if (parentFormResetListener && parentForm && resets) {
 			parentForm.removeEventListener('reset', parentFormResetListener);
 		}
 	});
diff --git a/frontend/src/lib/components/DateTimeField.svelte b/frontend/src/lib/components/DateTimeField.svelte
index 6d6788e..de06732 100644
--- a/frontend/src/lib/components/DateTimeField.svelte
+++ b/frontend/src/lib/components/DateTimeField.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { afterUpdate, onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import ToolTip from './ToolTip.svelte';
 	import { addToast } from '$lib/store/toast';
 
@@ -67,24 +67,24 @@
 		}
 	}
 
-	afterUpdate(() => {
-		// handle reset
-		if (!parentForm && resets) {
-			parentForm = bindToDate.closest('form');
-			if (!parentForm) {
-				return;
+	onMount(() => {
+		if (resets) {
+			parentForm = bindToDate?.closest('form');
+			if (parentForm) {
+				// store the handler reference so it can be properly removed later
+				parentFormResetListener = (event) => {
+					event.preventDefault();
+					dateValue = '';
+					timeValue = '';
+					value = defaultValue;
+				};
+				parentForm.addEventListener('reset', parentFormResetListener);
 			}
-			parentFormResetListener = parentForm.addEventListener('reset', (event) => {
-				event.preventDefault();
-				dateValue = '';
-				timeValue = '';
-				value = defaultValue;
-			});
 		}
 	});
 
 	onDestroy(() => {
-		if (parentFormResetListener && resets) {
+		if (parentFormResetListener && parentForm && resets) {
 			parentForm.removeEventListener('reset', parentFormResetListener);
 		}
 	});
diff --git a/frontend/src/lib/components/FileField.svelte b/frontend/src/lib/components/FileField.svelte
index e085132..1bd6220 100644
--- a/frontend/src/lib/components/FileField.svelte
+++ b/frontend/src/lib/components/FileField.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { afterUpdate, onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import ToolTip from './ToolTip.svelte';
 
 	// bind a element to this component input field
@@ -20,22 +20,21 @@
 	// listen to parent form reset event, if one exists
 	let parentFormResetListener = null;
 
-	onMount(() => {});
-
-	afterUpdate(() => {
-		if (!parentForm && resets) {
-			parentForm = bindTo.closest('form');
-			if (!parentForm) {
-				return;
+	onMount(() => {
+		if (resets) {
+			parentForm = bindTo?.closest('form');
+			if (parentForm) {
+				// store the handler reference so it can be properly removed later
+				parentFormResetListener = (event) => {
+					event.preventDefault();
+				};
+				parentForm.addEventListener('reset', parentFormResetListener);
 			}
-			parentFormResetListener = parentForm.addEventListener('reset', (event) => {
-				event.preventDefault();
-			});
 		}
 	});
 
 	onDestroy(() => {
-		if (parentFormResetListener && resets) {
+		if (parentFormResetListener && parentForm && resets) {
 			parentForm.removeEventListener('reset', parentFormResetListener);
 		}
 	});
diff --git a/frontend/src/lib/components/PasswordField.svelte b/frontend/src/lib/components/PasswordField.svelte
index e68e43c..168e533 100644
--- a/frontend/src/lib/components/PasswordField.svelte
+++ b/frontend/src/lib/components/PasswordField.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { afterUpdate, onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import ToolTip from './ToolTip.svelte';
 
 	// use like <PasswordField bind:bindTo={varYouWantToBindTheInputFieldTo} />
@@ -21,23 +21,20 @@
 
 	onMount(() => {
 		value = value ?? defaultValue;
-	});
 
-	afterUpdate(() => {
-		if (!parentForm) {
-			parentForm = bindTo.closest('form');
-			if (!parentForm) {
-				return;
-			}
-			parentFormResetListener = parentForm.addEventListener('reset', (event) => {
+		parentForm = bindTo?.closest('form');
+		if (parentForm) {
+			// store the handler reference so it can be properly removed later
+			parentFormResetListener = (event) => {
 				event.preventDefault();
 				value = defaultValue;
-			});
+			};
+			parentForm.addEventListener('reset', parentFormResetListener);
 		}
 	});
 
 	onDestroy(() => {
-		if (parentFormResetListener) {
+		if (parentFormResetListener && parentForm) {
 			parentForm.removeEventListener('reset', parentFormResetListener);
 		}
 	});
diff --git a/frontend/src/lib/components/TextField.svelte b/frontend/src/lib/components/TextField.svelte
index 6a79e05..1e0bbc9 100644
--- a/frontend/src/lib/components/TextField.svelte
+++ b/frontend/src/lib/components/TextField.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { afterUpdate, onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import ToolTip from './ToolTip.svelte';
 
 	// bind a element to this component input field
@@ -36,23 +36,22 @@
 	onMount(() => {
 		value = value ?? defaultValue;
 		inputType = type;
-	});
 
-	afterUpdate(() => {
-		if (!parentForm && resets) {
-			parentForm = bindTo.closest('form');
-			if (!parentForm) {
-				return;
+		if (resets) {
+			parentForm = bindTo?.closest('form');
+			if (parentForm) {
+				// store the handler reference so it can be properly removed later
+				parentFormResetListener = (event) => {
+					event.preventDefault();
+					value = defaultValue;
+				};
+				parentForm.addEventListener('reset', parentFormResetListener);
 			}
-			parentFormResetListener = parentForm.addEventListener('reset', (event) => {
-				event.preventDefault();
-				value = defaultValue;
-			});
 		}
 	});
 
 	onDestroy(() => {
-		if (parentFormResetListener && resets) {
+		if (parentFormResetListener && parentForm && resets) {
 			parentForm.removeEventListener('reset', parentFormResetListener);
 		}
 	});
diff --git a/frontend/src/lib/components/TextFieldMultiSelect.svelte b/frontend/src/lib/components/TextFieldMultiSelect.svelte
index eaf1530..9912646 100644
--- a/frontend/src/lib/components/TextFieldMultiSelect.svelte
+++ b/frontend/src/lib/components/TextFieldMultiSelect.svelte
@@ -228,6 +228,16 @@
 		window.addEventListener('scroll', updateDropdownPosition, true);
 		window.addEventListener('resize', updateDropdownPosition);
 
+		// register parent form reset listener once at mount time with a proper handler reference
+		parentForm = inputElement?.closest('form');
+		if (parentForm) {
+			parentFormResetListener = (event) => {
+				event.preventDefault();
+				value = defaultValue;
+			};
+			parentForm.addEventListener('reset', parentFormResetListener);
+		}
+
 		return () => {
 			unsubscribe();
 			document.removeEventListener('click', handleOutsideClick);
@@ -240,16 +250,6 @@
 		if (inputElement) {
 			bindTo = inputElement;
 		}
-
-		if (!parentForm && inputElement) {
-			parentForm = inputElement.closest('form');
-			if (parentForm) {
-				parentFormResetListener = parentForm.addEventListener('reset', (event) => {
-					event.preventDefault();
-					value = defaultValue;
-				});
-			}
-		}
 	});
 
 	onDestroy(() => {
diff --git a/frontend/src/lib/components/TextFieldSearchSelect.svelte b/frontend/src/lib/components/TextFieldSearchSelect.svelte
index 6d5b296..4ddd03c 100644
--- a/frontend/src/lib/components/TextFieldSearchSelect.svelte
+++ b/frontend/src/lib/components/TextFieldSearchSelect.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { afterUpdate, onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import ToolTip from './ToolTip.svelte';
 
 	export let id;
@@ -46,23 +46,20 @@
 	// listen to parent form reset event, if one exists
 	let parentFormResetListener = null;
 
-	onMount(() => {});
-
-	afterUpdate(() => {
-		if (!parentForm) {
-			parentForm = bindTo.closest('form');
-			if (!parentForm) {
-				return;
-			}
-			parentFormResetListener = parentForm.addEventListener('reset', (event) => {
+	onMount(() => {
+		parentForm = bindTo?.closest('form');
+		if (parentForm) {
+			// store the handler reference so it can be properly removed later
+			parentFormResetListener = (event) => {
 				event.preventDefault();
 				value = '';
-			});
+			};
+			parentForm.addEventListener('reset', parentFormResetListener);
 		}
 	});
 
 	onDestroy(() => {
-		if (parentFormResetListener) {
+		if (parentFormResetListener && parentForm) {
 			parentForm.removeEventListener('reset', parentFormResetListener);
 		}
 	});
diff --git a/frontend/src/lib/components/TextFieldSelect.svelte b/frontend/src/lib/components/TextFieldSelect.svelte
index 56574af..c3ba3fe 100644
--- a/frontend/src/lib/components/TextFieldSelect.svelte
+++ b/frontend/src/lib/components/TextFieldSelect.svelte
@@ -233,6 +233,16 @@
 		window.addEventListener('scroll', updateDropdownPosition, true);
 		window.addEventListener('resize', updateDropdownPosition);
 
+		// register parent form reset listener once at mount time with a proper handler reference
+		parentForm = inputElement?.closest('form');
+		if (parentForm) {
+			parentFormResetListener = (event) => {
+				event.preventDefault();
+				value = defaultValue;
+			};
+			parentForm.addEventListener('reset', parentFormResetListener);
+		}
+
 		return () => {
 			unsubscribe();
 			document.removeEventListener('click', handleOutsideClick);
@@ -245,16 +255,6 @@
 		if (inputElement) {
 			bindTo = inputElement;
 		}
-
-		if (!parentForm && inputElement) {
-			parentForm = inputElement.closest('form');
-			if (parentForm) {
-				parentFormResetListener = parentForm.addEventListener('reset', (event) => {
-					event.preventDefault();
-					value = defaultValue;
-				});
-			}
-		}
 	});
 
 	onDestroy(() => {
diff --git a/frontend/src/lib/components/TextareaField.svelte b/frontend/src/lib/components/TextareaField.svelte
index b0e8c8c..625cc80 100644
--- a/frontend/src/lib/components/TextareaField.svelte
+++ b/frontend/src/lib/components/TextareaField.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { afterUpdate, onDestroy, onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import ToolTip from './ToolTip.svelte';
 
 	// bind a element to this component input field
@@ -28,23 +28,20 @@
 
 	onMount(() => {
 		value = value ?? defaultValue;
-	});
 
-	afterUpdate(() => {
-		if (!parentForm) {
-			parentForm = bindTo.closest('form');
-			if (!parentForm) {
-				return;
-			}
-			parentFormResetListener = parentForm.addEventListener('reset', (event) => {
+		parentForm = bindTo?.closest('form');
+		if (parentForm) {
+			// store the handler reference so it can be properly removed later
+			parentFormResetListener = (event) => {
 				event.preventDefault();
 				value = defaultValue;
-			});
+			};
+			parentForm.addEventListener('reset', parentFormResetListener);
 		}
 	});
 
 	onDestroy(() => {
-		if (parentFormResetListener) {
+		if (parentFormResetListener && parentForm) {
 			parentForm.removeEventListener('reset', parentFormResetListener);
 		}
 	});
diff --git a/frontend/src/lib/components/form/TextFieldSelectWithType.svelte b/frontend/src/lib/components/form/TextFieldSelectWithType.svelte
index 319add3..60c0c66 100644
--- a/frontend/src/lib/components/form/TextFieldSelectWithType.svelte
+++ b/frontend/src/lib/components/form/TextFieldSelectWithType.svelte
@@ -191,6 +191,16 @@
 		const unsubscribe = activeFormElementSubscribe(_id, closeDropdown);
 		document.addEventListener('click', handleOutsideClick);
 
+		// register parent form reset listener once at mount time with a proper handler reference
+		parentForm = inputElement?.closest('form');
+		if (parentForm) {
+			parentFormResetListener = (event) => {
+				event.preventDefault();
+				value = defaultValue;
+			};
+			parentForm.addEventListener('reset', parentFormResetListener);
+		}
+
 		return () => {
 			unsubscribe();
 			document.removeEventListener('click', handleOutsideClick);
@@ -201,16 +211,6 @@
 		if (inputElement) {
 			bindTo = inputElement;
 		}
-
-		if (!parentForm && inputElement) {
-			parentForm = inputElement.closest('form');
-			if (parentForm) {
-				parentFormResetListener = parentForm.addEventListener('reset', (event) => {
-					event.preventDefault();
-					value = defaultValue;
-				});
-			}
-		}
 	});
 
 	onDestroy(() => {
diff --git a/frontend/src/lib/components/table/Table.svelte b/frontend/src/lib/components/table/Table.svelte
index 0eec088..e054908 100644
--- a/frontend/src/lib/components/table/Table.svelte
+++ b/frontend/src/lib/components/table/Table.svelte
@@ -4,7 +4,7 @@
 	import TableHeader from './TableHeader.svelte';
 	import Search from '$lib/components/Search.svelte';
 	import Select from '$lib/components/Select.svelte';
-	import { afterUpdate, onMount } from 'svelte';
+	import { afterUpdate, onMount, onDestroy } from 'svelte';
 	import TableCell from './TableCell.svelte';
 	import TableRow from './TableRow.svelte';
 	import TableCellEmpty from './TableCellEmpty.svelte';
diff --git a/frontend/src/lib/components/table/TableDropDownEllipsis.svelte b/frontend/src/lib/components/table/TableDropDownEllipsis.svelte
index 5428dd9..8bf6601 100644
--- a/frontend/src/lib/components/table/TableDropDownEllipsis.svelte
+++ b/frontend/src/lib/components/table/TableDropDownEllipsis.svelte
@@ -12,10 +12,7 @@
 	// generate unique id for this dropdown instance
 	const dropdownId = Symbol();
 
-	// subscribe to active dropdown store
-	const unsubscribe = activeFormElement.subscribe((activeId) => {
-		isMenuVisible = activeId === dropdownId;
-	});
+	let unsubscribe = () => {};
 
 	const toggle = (e) => {
 		if (isMenuVisible) {
@@ -119,6 +116,11 @@
 	onDestroy(_onDestroy);
 
 	onMount(() => {
+		// subscribe inside onMount so the subscription is only active while the component is mounted
+		unsubscribe = activeFormElement.subscribe((activeId) => {
+			isMenuVisible = activeId === dropdownId;
+		});
+
 		return () => {
 			_onDestroy();
 		};