Added focusing for capacitor input box in invoice validation

app/Filament/Resources/InvoiceValidationResource.php

@@ -121,12 +121,14 @@ class InvoiceValidationResource extends Resource
                     ->readOnly(fn (callable $get) => empty($get('invoice_number')))
                     //->disabled(fn (Get $get) => empty($get('invoice_number')))
                     ->extraAttributes([
+                        'id' => 'serial_number_input',
                         'x-data' => '{ value: "" }',
                         'x-model' => 'value',
                         'wire:keydown.enter.prevent' => 'processSerialNumber(value)',  // Using wire:keydown
                     ])
                     ->afterStateUpdated(function ($state, callable $set, callable $get) {
                         $set('update_invoice', 0);
+                        // $this->dispatch('focus-serial-number');
                         // if (!$invNo) { return; } else { }
                     })
                     ->columnSpan(1),

app/Livewire/InvoiceDataTable.php

@@ -175,6 +175,9 @@ class InvoiceDataTable extends Component
         $this->completedInvoice = false;
         $this->hasSearched = false;
         $this->materialInvoice = false;
+         $this->dispatch('focus-capacitor-input');
+
+
     }
 
     public function cancelCapacitorInput()
@@ -339,6 +342,7 @@ class InvoiceDataTable extends Component
         }
         $this->showCapacitorInput = false;
         $this->capacitorInput = '';
+        $this->dispatch('focus-serial-number');
     }
 
     public function render()

resources/views/livewire/invoice-data-table.blade.php

@@ -159,3 +159,28 @@
         input.focus(); // Set focus to the input field
     });
 </script> --}}
+<script>
+    window.addEventListener('focus-capacitor-input', () => {
+        setTimeout(() => {
+            const input = document.getElementById('capacitorInput');
+            if (input) {
+                input.focus();
+                input.select();
+            }
+        }, 50);
+    });
+
+   window.addEventListener('focus-serial-number', () => {
+    setTimeout(() => {
+        const container = document.getElementById('serial_number_input');
+        const input = container?.querySelector('input'); // gets the actual input inside
+
+        if (input) {
+            input.focus();
+            input.select();
+        }
+    }, 100);
+});
+
+</script>
+