Bookform: fix scrollTo on mobile view

regression of previous commit

front/src/BookFormIcons.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useTemplateRef, nextTick } from 'vue'
 import BigIcon from './BigIcon.vue'
 import BookDateWidget from './BookDateWidget.vue'
 import DateWidget from './DateWidget.vue'
@@ -10,6 +11,8 @@ const props = defineProps({
   read: Boolean,
 })
 
+const mobiledatesel = useTemplateRef('mobiledates')
+
 const emit = defineEmits([
   'onWantReadIconClick',
   'onStartReadIconClick',
@@ -23,6 +26,18 @@ function isStartReadExpanded() {
   let isReadUnset = !props.read ? true : false
   return isStartReadDateSet && isReadUnset
 }
+
+async function onReadIconClick() {
+  emit('onReadIconClick')
+  await nextTick()
+  mobiledatesel.value.scrollIntoView()
+}
+
+async function onStartReadIconClick() {
+  emit('onStartReadIconClick')
+  await nextTick()
+  mobiledatesel.value.scrollIntoView()
+}
 </script>
 
 <template>
@@ -47,7 +62,7 @@ function isStartReadExpanded() {
         :legend="$t('bookform.wantread')"
         :is-set="isStartReadExpanded()"
         :is-readonly="props.read"
-        @click="props.read ? null : $emit('onStartReadIconClick')"
+        @click="props.read ? null : onStartReadIconClick()"
       />
     </div>
     <div
@@ -58,7 +73,7 @@ function isStartReadExpanded() {
         icon="BIconCheckCircle"
         :legend="$t('bookform.read')"
         :isSet="props.read"
-        @click="$emit('onReadIconClick')"
+        @click="onReadIconClick"
       />
     </div>
     <BookDateWidget
@@ -69,7 +84,7 @@ function isStartReadExpanded() {
       :is-expanded="isStartReadExpanded()"
       :is-readonly="props.read"
       @onStartDateChange="(d) => $emit('onStartReadDateChange', d)"
-      @onIconClick="$emit('onStartReadIconClick')"
+      @onIconClick="onStartReadIconClick"
     />
     <BookDateWidget
       class="is-hidden-mobile"
@@ -82,7 +97,7 @@ function isStartReadExpanded() {
       :isExpanded="props.read"
       @onStartDateChange="(d) => $emit('onStartReadDateChange', d)"
       @onEndDateChange="(d) => $emit('onEndReadDateChange', d)"
-      @onIconClick="$emit('onReadIconClick')"
+      @onIconClick="onReadIconClick"
     />
   </div>