From ff5e8e380275788d8fb39c45721fe4e24fa7a442 Mon Sep 17 00:00:00 2001
From: Dominic <dominic.schmid@hotmail.com>
Date: Sun, 11 Jan 2026 06:18:28 +0100
Subject: [PATCH] feat(InputWithSelect): add dirty tracking styling and enhance
 input handling

---
 .../forms/input-with-select.blade.php         | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/forms/input-with-select.blade.php b/resources/views/components/forms/input-with-select.blade.php
index d9f72143f..5a9e10d4b 100644
--- a/resources/views/components/forms/input-with-select.blade.php
+++ b/resources/views/components/forms/input-with-select.blade.php
@@ -3,6 +3,16 @@
     $selectId = $htmlId !== 'null' ? $htmlId . '-select' : null;
 @endphp
 
+<style>
+    /* Apply dirty styling to visible input when hidden input is dirty */
+    .input-with-select-container input[type="hidden"].dirty-tracker ~ input {
+        box-shadow: inset 4px 0 0 #6b16ed, inset 0 0 0 2px #e5e5e5 !important;
+    }
+    .dark .input-with-select-container input[type="hidden"].dirty-tracker ~ input {
+        box-shadow: inset 4px 0 0 #fcd452, inset 0 0 0 2px #242424 !important;
+    }
+</style>
+
 <div class="w-full" 
      x-data="inputWithSelect({
         defaultUnit: @js($defaultOption ?? ''),
@@ -30,7 +40,15 @@
         </label>
     @endif
 
-    <div class="flex">
+    <div class="flex input-with-select-container">
+        {{-- Hidden input for wire:dirty tracking (binds to combinedValue which has the full value with unit) --}}
+        @if ($modelBinding !== 'null')
+            <input type="hidden" 
+                wire:model={{ $combinedBinding }}
+                wire:dirty.class="dirty-tracker"
+            />
+        @endif
+        
         {{-- Input --}}
         <input 
             type="{{ $type }}"
@@ -137,7 +155,7 @@ document.addEventListener('alpine:init', () => {
         parseCombinedValue(combined) {
             // Parse combinedValue (e.g., "512m") into structured format
             // Only matches if suffix is a valid unit to avoid footguns
-            if (!combined || combined === '0') {
+            if (!combined || combined === '0' || combined === 'null' || combined === null) {
                 return { value: '', unit: config.defaultUnit };
             }