Book form mobile view: scroll to dates when opened

front/src/BookForm.vue

@@ -12,6 +12,7 @@ import {
   putEndReadDateUnset,
   putUnreadBook,
 } from './api.js'
+import { useTemplateRef, nextTick } from 'vue'
 import { useRouter, onBeforeRouteUpdate } from 'vue-router'
 import { VRating } from 'vuetify/components/VRating'
 import BigIcon from './BigIcon.vue'
@@ -28,6 +29,7 @@ let data = ref(null)
 let error = ref(null)
 getBook(data, error, props.id)
 const imagePathOrDefault = computed(() => getImagePathOrDefault(data.value.coverPath))
+const mobiledatesel = useTemplateRef('mobiledates')
 
 onBeforeRouteUpdate(async (to, from) => {
   getBook(data, error, to.params.id)
@@ -42,12 +44,14 @@ function onRatingUpdate(rating) {
   putRateBook(props.id, { rating: data.value.rating })
 }
 
-function onReadIconClick() {
+async function onReadIconClick() {
   data.value.read = !data.value.read
   if (data.value.read) {
     data.value.wantread = false
     data.value.endReadDate = today
     putEndReadDate(props.id, today)
+    await nextTick()
+    mobiledatesel.value.scrollIntoView()
   } else {
     putUnreadBook(props.id)
   }
@@ -58,10 +62,12 @@ function onWantReadIconClick() {
   putWantReadBook(props.id, { wantread: data.value.wantread })
 }
 
-function onStartReadIconClick() {
+async function onStartReadIconClick() {
   if (!data.value.startReadDate) {
     data.value.startReadDate = today
     putStartReadDate(props.id, data.value.startReadDate)
+    await nextTick()
+    mobiledatesel.value.scrollIntoView()
   } else {
     data.value.startReadDate = null
     putStartReadDateUnset(props.id)
@@ -186,7 +192,7 @@ function goToAuthor() {
           @onIconClick="onReadIconClick"
         />
       </div>
-      <div class="mobile-dates pt-3 is-hidden-desktop">
+      <div ref="mobiledates" class="mobile-dates pt-3 is-hidden-desktop">
         <div class="mobiledate">
           <DateWidget
             v-if="isStartReadExpanded() || data.read"