From 362db1238f64e30b3eb3cc1a7bb5c7c967388fe2 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sat, 13 Dec 2025 22:14:32 -0800
Subject: [PATCH] fix input focus loss when error state changes

always wrap in fieldset to keep DOM structure stable
---
 src/lib/components/ui/Input.svelte | 139 +++++++++--------------------
 1 file changed, 40 insertions(+), 99 deletions(-)

diff --git a/src/lib/components/ui/Input.svelte b/src/lib/components/ui/Input.svelte
index 2e5ae9fe..1bccea5a 100644
--- a/src/lib/components/ui/Input.svelte
+++ b/src/lib/components/ui/Input.svelte
@@ -99,62 +99,26 @@
 	})
 </script>
 
-{#if label || error}
-	<fieldset class={fieldsetClasses}>
-		{#if label}
-			<Label.Root class="label" for={restProps.id}>
-				{label}
-				{#if required}
-					<span class="required">*</span>
-				{/if}
-			</Label.Root>
-		{/if}
+<fieldset class={fieldsetClasses}>
+	{#if label}
+		<Label.Root class="label" for={restProps.id}>
+			{label}
+			{#if required}
+				<span class="required">*</span>
+			{/if}
+		</Label.Root>
+	{/if}
 
-		{#if hasWrapper}
-			<div class={inputClasses}>
-				{#if leftIcon}
-					<span class="iconLeft">
-						<Icon name={leftIcon} size={16} />
-					</span>
-				{/if}
+	{#if hasWrapper}
+		<div class={inputClasses}>
+			{#if leftIcon}
+				<span class="iconLeft">
+					<Icon name={leftIcon} size={16} />
+				</span>
+			{/if}
 
-				<input
-					bind:value
-					{type}
-					{placeholder}
-					{disabled}
-					{readonly}
-					{required}
-					maxlength={maxLength}
-					data-1p-ignore={no1password}
-					onblur={handleBlur}
-					onfocus={handleFocus}
-					oninput={handleInput}
-					{...restProps}
-				/>
-
-				{#if rightIcon}
-					<span class="iconRight">
-						<Icon name={rightIcon} size={16} />
-					</span>
-				{/if}
-
-				{#if validationIcon}
-					<span class="validationIcon {validationState}">
-						<Icon name={validationIcon} size={16} />
-					</span>
-				{/if}
-
-				{#if showCounter}
-					<span class="counter" class:warning={charsRemaining !== undefined && charsRemaining <= 5}>
-						{charsRemaining !== undefined ? charsRemaining : currentCount}
-					</span>
-				{/if}
-			</div>
-		{:else}
 			<input
 				bind:value
-				class={inputClasses}
 				{type}
 				{placeholder}
 				{disabled}
@@ -167,22 +131,29 @@
 				oninput={handleInput}
 				{...restProps}
 			/>
-		{/if}
 
-		{#if error}
-			<span class="error">{error}</span>
-		{/if}
-	</fieldset>
-{:else if hasWrapper}
-	<div class={inputClasses}>
-		{#if leftIcon}
-			<span class="iconLeft">
-				<Icon name={leftIcon} size={16} />
-			</span>
-		{/if}
+			{#if rightIcon}
+				<span class="iconRight">
+					<Icon name={rightIcon} size={16} />
+				</span>
+			{/if}
 
+			{#if validationIcon}
+				<span class="validationIcon {validationState}">
+					<Icon name={validationIcon} size={16} />
+				</span>
+			{/if}
+
+			{#if showCounter}
+				<span class="counter" class:warning={charsRemaining !== undefined && charsRemaining <= 5}>
+					{charsRemaining !== undefined ? charsRemaining : currentCount}
+				</span>
+			{/if}
+		</div>
+	{:else}
 		<input
 			bind:value
+			class={inputClasses}
 			{type}
 			{placeholder}
 			{disabled}
@@ -195,42 +166,12 @@
 			oninput={handleInput}
 			{...restProps}
 		/>
+	{/if}
 
-		{#if rightIcon}
-			<span class="iconRight">
-				<Icon name={rightIcon} size={16} />
-			</span>
-		{/if}
-
-		{#if validationIcon}
-			<span class="validationIcon {validationState}">
-				<Icon name={validationIcon} size={16} />
-			</span>
-		{/if}
-
-		{#if showCounter}
-			<span class="counter" class:warning={charsRemaining !== undefined && charsRemaining <= 5}>
-				{charsRemaining !== undefined ? charsRemaining : currentCount}
-			</span>
-		{/if}
-	</div>
-{:else}
-	<input
-		bind:value
-		class={inputClasses}
-		{type}
-		{placeholder}
-		{disabled}
-		{readonly}
-		{required}
-		maxlength={maxLength}
-		data-1p-ignore={no1password}
-		onblur={handleBlur}
-		onfocus={handleFocus}
-		oninput={handleInput}
-		{...restProps}
-	/>
-{/if}
+	{#if error}
+		<span class="error">{error}</span>
+	{/if}
+</fieldset>
 
 <style lang="scss">
 	@use '$src/themes/spacing' as *;