From c3e02286d3b3e0102e4307add074547ee9c45209 Mon Sep 17 00:00:00 2001
From: spencerrlongg <spencer@spencerlong.com>
Date: Thu, 16 Nov 2023 11:24:54 -0600
Subject: [PATCH] i can't blame this on livewire - animations or something?

---
 app/Http/Livewire/PersonalAccessTokens.php             |  7 +++++++
 .../views/livewire/personal-access-tokens.blade.php    | 10 +++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/Http/Livewire/PersonalAccessTokens.php b/app/Http/Livewire/PersonalAccessTokens.php
index 545202580..892503529 100644
--- a/app/Http/Livewire/PersonalAccessTokens.php
+++ b/app/Http/Livewire/PersonalAccessTokens.php
@@ -12,6 +12,13 @@ class PersonalAccessTokens extends Component
     public $name;
     public $newTokenString;
 
+    protected $listeners = ['openModal' => 'autoFocusModalEvent'];
+
+    public function autoFocusModalEvent()
+    {
+        $this->dispatchBrowserEvent('autoFocusModal');
+    }
+
     public function render()
     {
         return view('livewire.personal-access-tokens', [
diff --git a/resources/views/livewire/personal-access-tokens.blade.php b/resources/views/livewire/personal-access-tokens.blade.php
index 09378edfc..dfb00041c 100644
--- a/resources/views/livewire/personal-access-tokens.blade.php
+++ b/resources/views/livewire/personal-access-tokens.blade.php
@@ -4,6 +4,7 @@
             <div class="text-right" style="display: flex; justify-content: space-between; align-items: center;">
                 <a class="btn btn-info btn-sm action-link pull-right"
                    onclick="$('#modal-create-token').modal('show');"
+                   wire:click="$emit('openModal')"
                 >
                     Create New Token
                 </a>
@@ -98,6 +99,7 @@
                                        wire:keydown.enter="createToken(name)"
                                        {{-- defer because it's submitting as i type if i don't --}}
                                        wire:model.defer="name"
+                                       autofocus
                                 >
                             </div>
 
@@ -175,10 +177,16 @@
         </div>
     </div>
     <script>
-        window.addEventListener('tokenCreated', token => {
+        window.addEventListener('tokenCreated', function() {
             $('#modal-create-token').modal('hide');
             $('#modal-access-token').modal('show');
         })
+        window.addEventListener('autoFocusModal', function() {
+            $('#modal-create-token').on('shown.bs.modal', function() {
+                $(this).find('[autofocus]').focus();
+            });
+        })
+        // was trying to do a submit on the form when enter was pressed
         window.addEventListener("keydown", function (event) {
             if (event.key === 'Enter') {
                 event.preventDefault();