Update create bookmark to not autofocus input and leave empty with 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()