fix(form): add new form component with scroll to first invalid field

baloise · Aug 23, 2022 · 812e967 · 812e967
1 parent 3ba8d54
commit 812e967
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/packages/components/src/utils/form.ts b/packages/components/src/utils/form.ts
@@ -1,14 +1,21 @@
 interface ScrollToFirstInvalidFieldOptions {
   formEl: HTMLElement
+  selector?: string
 }
 
 export const scrollToFirstInvalidField = (options: ScrollToFirstInvalidFieldOptions) => {
-  const invalidFieldNodes = options.formEl.querySelectorAll('.bal-field--invalid')
+  const selector = options.selector || '.bal-field--invalid'
+  const invalidFieldNodes = options.formEl.querySelectorAll(selector)
   const invalidFields = Array.from(invalidFieldNodes)
+
   if (invalidFields.length > 0) {
     const firstInvalidField = invalidFields[0]
-    if (firstInvalidField && firstInvalidField.scrollIntoView) {
-      firstInvalidField.scrollIntoView()
+    if (firstInvalidField) {
+      const invalidField = firstInvalidField.closest('bal-field')
+
+      if (invalidField && invalidField.scrollIntoView) {
+        invalidField.scrollIntoView()
+      }
     }
   }
 }