Scroll to component on error

bcgov · Jan 21, 2025 · cfd10e4 · cfd10e4
1 parent f5ff1c2
commit cfd10e4
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/auth-web/src/components/auth/account-settings/product/ProductPayment.vue b/auth-web/src/components/auth/account-settings/product/ProductPayment.vue
@@ -104,6 +104,7 @@
         Please save your payment settings before making any product changes
       </span>
       <AccountPaymentMethods
+        ref="paymentMethodRef"
         :isEditing="isEditing"
         :isBcolAdmin="isBcolAdmin"
         @disable-editing="isEditing = false"
@@ -219,6 +220,8 @@ export default defineComponent({
       currentSelectedProducts
     } = storeToRefs(useOrgStore())
 
+    const paymentMethodRef = ref(null)
+
     const state = reactive({
       isBtnSaved: false,
       disableSaveBtn: false,
@@ -480,6 +483,12 @@ export default defineComponent({
       }
     })
 
+    watch(() => state.displaySavePaymentMethodsFirst, (newValue) => {
+      if (newValue) {
+        paymentMethodRef.value.$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }
+    })
+
     return {
       setup,
       closeError,
@@ -497,6 +506,7 @@ export default defineComponent({
       AccountStatus,
       ProductStatus,
       ProductEnum,
+      paymentMethodRef,
       ...toRefs(state)
     }
   }