From 6cacf6b2c5452fdfcc676fc996dbea036eb6b4db Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Mon, 13 Jan 2025 16:48:51 -0600
Subject: [PATCH] Update create bookmark to auto focus and select input

---
 components/modals/BookmarksModal.vue | 12 +++++++++++-
 components/ui/TextInputWithLabel.vue |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/components/modals/BookmarksModal.vue b/components/modals/BookmarksModal.vue
index fb1d9a03..8b8284d9 100644
--- a/components/modals/BookmarksModal.vue
+++ b/components/modals/BookmarksModal.vue
@@ -17,7 +17,7 @@
             <p class="text-xl font-mono">{{ this.$secondsToTimestamp(currentTime) }}</p>
           </div>
 
-          <ui-text-input-with-label v-model="newBookmarkTitle" label="Note" />
+          <ui-text-input-with-label v-model="newBookmarkTitle" ref="noteInput" label="Note" />
           <div class="flex justify-end mt-6">
             <ui-btn color="success" class="w-full" @click.stop="submitBookmark">{{ selectedBookmark ? 'Update' : 'Create' }}</ui-btn>
           </div>
@@ -151,6 +151,16 @@ export default {
       this.selectedBookmark = null
       this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
       this.showBookmarkTitleInput = true
+
+      // Auto focus the input and select the text
+      this.$nextTick(() => {
+        if (this.$refs.noteInput?.$refs.input?.$refs.input) {
+          this.$refs.noteInput.$refs.input.$refs.input.focus()
+          setTimeout(() => {
+            this.$refs.noteInput?.$refs.input?.$refs.input?.select()
+          }, 10)
+        }
+      })
     },
     async submitBookmark() {
       await this.$hapticsImpact()
diff --git a/components/ui/TextInputWithLabel.vue b/components/ui/TextInputWithLabel.vue
index c09dc2b2..d7500951 100644
--- a/components/ui/TextInputWithLabel.vue
+++ b/components/ui/TextInputWithLabel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
     <p class="pb-0.5 text-sm font-semibold">{{ label }}</p>
-    <ui-text-input v-model="inputValue" :disabled="disabled" :type="type" text-size="base" class="w-full" />
+    <ui-text-input v-model="inputValue" ref="input" :disabled="disabled" :type="type" text-size="base" class="w-full" />
   </div>
 </template>