Some more tests to make an anchor scroll and a focus on the input field.

dreammall-earth · Apr 17, 2024 · 1b0d55c · 1b0d55c
1 parent dff581c
commit 1b0d55c
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 7 deletions.
diff --git a/presenter/src/components/forms/NewsletterForm.vue b/presenter/src/components/forms/NewsletterForm.vue
@@ -98,11 +98,18 @@ const showInfoTime: number = 5000
 const form = ref<HTMLFormElement>()
 const inputFieldNewsletter = ref()
 
+const focusInput = () => {
+  if (inputFieldNewsletter.value) {
+    inputFieldNewsletter.value.focusInput()
+  }
+}
+
 const { mutate: sendSubscribeToNewsletter } = useMutation(subscribeToNewsletter)
 
 defineExpose({
   form,
   inputFieldNewsletter,
+  focusInput,
 })
 // submit form with data
 async function submitForm() {

diff --git a/presenter/src/components/inputs/NameInput.vue b/presenter/src/components/inputs/NameInput.vue
@@ -1,5 +1,6 @@
 <template>
   <v-text-field
+    ref="inputField"
     :model-value="props.modelValue"
     :name="props.name"
     :class="props.class"
@@ -18,6 +19,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+
 import { nameRules } from '#src/validation/validation'
 
 const props = withDefaults(
@@ -61,4 +64,15 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'update:modelValue', event: string): void
 }>()
+
+const inputField = ref()
+const focusInput = () => {
+  if (inputField.value) {
+    inputField.value.focus()
+  }
+}
+defineExpose({
+  inputField,
+  focusInput,
+})
 </script>
diff --git a/presenter/src/components/menu/HeaderMenu.vue b/presenter/src/components/menu/HeaderMenu.vue
@@ -17,7 +17,6 @@
           ></AnchorLink>
           <AnchorLink
             class="mx-4"
-            href="/#contactname"
             :label="$t('menu.header.contact')"
             @click.prevent="scrollToNewsletterAnchor"
           ></AnchorLink>
@@ -107,7 +106,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeMount, nextTick } from 'vue'
+import { ref, onMounted, onBeforeMount } from 'vue'
 
 import MobileMenuIcon from '#assets/img/hamburger_mobile.svg'
 import MainButton from '#components/buttons/MainButton.vue'
@@ -121,9 +120,10 @@ const anchorNewsletter = ref()
 const scrollToNewsletterAnchor = () => {
   if (anchorNewsletter.value) {
     anchorNewsletter.value.scrollIntoView({ behavior: 'smooth' })
-    nextTick(() => {
-      anchorNewsletter.value.newsletterForm.value.inputFieldNewsletter.value.focus()
-    })
+    anchorNewsletter.value.focusInput()
+    // nextTick(() => {
+    //   anchorNewsletter.value.newsletterForm.value.inputFieldNewsletter.value.focus()
+    // })
   }
 }
 

diff --git a/presenter/src/components/sections/NewsletterSection.vue b/presenter/src/components/sections/NewsletterSection.vue
@@ -48,8 +48,15 @@ import NewsletterForm from '#components/forms/NewsletterForm.vue'
 // const newsletterDownloadPath = '#'
 const newsletterForm = ref()
 
+const focusInput = () => {
+  if (newsletterForm.value) {
+    newsletterForm.value.focusInput()
+  }
+}
+
 defineExpose({
   newsletterForm,
+  focusInput,
 })
 </script>
 

diff --git a/presenter/src/pages/index/+Page.vue b/presenter/src/pages/index/+Page.vue
@@ -12,8 +12,8 @@
     <div id="planning-section" class="py-16 px-4">
       <PlanningSection />
     </div>
-    <div id="newsletter-section" ref="anchorNewsletter" class="py-16 px-4">
-      <NewsletterSection />
+    <div id="newsletter-section" class="py-16 px-4">
+      <NewsletterSection ref="anchorNewsletter" />
     </div>
     <div id="coffee-section" class="py-16 px-4">
       <CoffeeSection />
@@ -37,9 +37,15 @@ import PlanningSection from '#root/src/components/sections/PlanningSection.vue'
 import ProductsSection from '#root/src/components/sections/ProductsSection.vue'
 
 const anchorNewsletter = ref()
+const focusInput = () => {
+  if (anchorNewsletter.value) {
+    anchorNewsletter.value.focusInput()
+  }
+}
 
 defineExpose({
   anchorNewsletter,
+  focusInput,
 })
 </script>