fix: Backup task form focusing

vanguardbackup · Jul 27, 2024 · 2ad37a3 · 2ad37a3
1 parent 62d952a
commit 2ad37a3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/app/Livewire/BackupTasks/Forms/CreateBackupTaskForm.php b/app/Livewire/BackupTasks/Forms/CreateBackupTaskForm.php
@@ -406,6 +406,23 @@ public function getSummary(): array
         );
     }
 
+    /**
+     * Retrieves the first input field on each step.
+     */
+    public function getFirstInputId(): ?string
+    {
+        return match ($this->currentStep) {
+            1 => 'label',
+            2 => 'remoteServerId',
+            3 => $this->backupType === BackupTask::TYPE_FILES ? 'sourcePath' : 'databaseName',
+            4 => $this->useCustomCron ? 'cronExpression' : 'frequency',
+            5 => $this->availableNotificationStreams instanceof Collection && $this->availableNotificationStreams->isNotEmpty()
+                ? 'stream-' . $this->availableNotificationStreams->first()->getAttribute('id')
+                : null,
+            default => null,
+        };
+    }
+
     /**
      * Ensure the given value is a string.
      *

diff --git a/resources/views/livewire/backup-tasks/forms/create-backup-task-form.blade.php b/resources/views/livewire/backup-tasks/forms/create-backup-task-form.blade.php
@@ -431,6 +431,17 @@ class="relative bg-gray-50 dark:bg-gray-700 rounded-lg p-4 transition-all durati
                     <div class="mt-6 max-w-3xl mx-auto" x-data="{
     currentStep: @entangle('currentStep'),
     totalSteps: @entangle('totalSteps'),
+    focusFirstInput() {
+        this.$nextTick(() => {
+            const firstInputId = this.$wire.getFirstInputId();
+            if (firstInputId) {
+                const firstInput = document.getElementById(firstInputId);
+                if (firstInput) {
+                    firstInput.focus();
+                }
+            }
+        });
+    },
     handleKeydown(event) {
         if (event.key === 'Enter') {
             if (this.currentStep < this.totalSteps) {
@@ -445,15 +456,15 @@ class="relative bg-gray-50 dark:bg-gray-700 rounded-lg p-4 transition-all durati
         }
     },
     nextStep() {
-        this.$wire.nextStep();
-},
+        this.$wire.nextStep().then(() => this.focusFirstInput());
+    },
     previousStep() {
-        this.$wire.previousStep();
+        this.$wire.previousStep().then(() => this.focusFirstInput());
     },
     save() {
         this.$refs.saveButton.click();
     }
-}" @keydown.window="handleKeydown">
+}" x-init="focusFirstInput" @keydown.window="handleKeydown">
                         <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-5">
                             <!-- Previous Button -->
                             <div class="w-full sm:w-2/6" x-show="currentStep > 1">