Merge pull request #1612 from advplyr/create_bookmarks_focus

Update create bookmark to not autofocus input and use placeholder

components/modals/BookmarksModal.vue

@@ -17,7 +17,7 @@
             <p class="text-xl font-mono">{{ this.$secondsToTimestamp(currentTime / _playbackRate) }}</p>
           </div>
 
-          <ui-text-input-with-label v-model="newBookmarkTitle" ref="noteInput" label="Note" />
+          <ui-text-input-with-label v-model="newBookmarkTitle" :placeholder="bookmarkPlaceholder()" :autofocus="false" 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>
@@ -93,6 +93,10 @@ export default {
     }
   },
   methods: {
+    bookmarkPlaceholder() {
+      // using a method prevents caching the date
+      return this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
+    },
     editBookmark(bm) {
       this.selectedBookmark = bm
       this.newBookmarkTitle = bm.title
@@ -157,18 +161,8 @@ export default {
     },
     createBookmark() {
       this.selectedBookmark = null
-      this.newBookmarkTitle = this.$formatDate(Date.now(), 'MMM dd, yyyy HH:mm')
+      this.newBookmarkTitle = ''
       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()

components/ui/TextInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="relative">
-    <input v-model="input" ref="input" autofocus :type="type" :disabled="disabled" :readonly="readonly" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="py-2 w-full outline-none bg-primary disabled:text-fg-muted" :class="inputClass" @keyup="keyup" />
+    <input v-model="input" ref="input" :autofocus="autofocus" :type="type" :disabled="disabled" :readonly="readonly" autocorrect="off" autocapitalize="none" autocomplete="off" :placeholder="placeholder" class="py-2 w-full outline-none bg-primary disabled:text-fg-muted" :class="inputClass" @keyup="keyup" />
     <div v-if="prependIcon" class="absolute top-0 left-0 h-full px-2 flex items-center justify-center">
       <span class="material-symbols text-lg">{{ prependIcon }}</span>
     </div>
@@ -22,6 +22,10 @@ export default {
     disabled: Boolean,
     readonly: Boolean,
     borderless: Boolean,
+    autofocus: {
+      type: Boolean,
+      default: true
+    },
     bg: {
       type: String,
       default: 'bg'

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" ref="input" :disabled="disabled" :type="type" text-size="base" class="w-full" />
+    <ui-text-input v-model="inputValue" ref="input" :disabled="disabled" :type="type" :placeholder="placeholder" :autofocus="autofocus" text-size="base" class="w-full" />
   </div>
 </template>
 
@@ -14,7 +14,12 @@ export default {
       type: String,
       default: 'text'
     },
-    disabled: Boolean
+    disabled: Boolean,
+    placeholder: String,
+    autofocus: {
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {}