From 67ff4d0f8a1a6e2effa17054187959efa35fa71e Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 1 Oct 2025 18:43:32 +0200
Subject: [PATCH] ui(components): auto-focus first input in modal on open

- Added an x-init directive to automatically focus the first input element (input, textarea, or select) when the modal is opened, enhancing user experience and accessibility.
---
 resources/views/components/modal-input.blade.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/views/components/modal-input.blade.php b/resources/views/components/modal-input.blade.php
index 71959d66d..239e95ad8 100644
--- a/resources/views/components/modal-input.blade.php
+++ b/resources/views/components/modal-input.blade.php
@@ -28,6 +28,7 @@ class="relative w-auto h-auto" wire:ignore>
     @endif
     <template x-teleport="body">
         <div x-show="modalOpen"
+            x-init="$watch('modalOpen', value => { if(value) { $nextTick(() => { const firstInput = $el.querySelector('input, textarea, select'); firstInput?.focus(); }) } })"
             class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen">
             <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"