feat: scroll first invalid element into view (#733)

* feat: scroll first invalid element into view * fix: hide this feature behind a config flag * docs: enable and document feature flag
adfinis · Feb 3, 2022 · ae7c8b2 · ae7c8b2
1 parent 95f4099
commit ae7c8b2
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 0 deletions.
diff --git a/addon/components/validated-form.js b/addon/components/validated-form.js
@@ -1,3 +1,4 @@
+import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { scheduleOnce } from "@ember/runloop";
 import Component from "@glimmer/component";
@@ -14,6 +15,10 @@ export default class ValidatedFormComponent extends Component {
 
   constructor(...args) {
     super(...args);
+    this.config =
+      getOwner(this).resolveRegistration("config:environment")[
+        "ember-validated-form"
+      ];
 
     if (this.args.model && this.args.model.validate) {
       scheduleOnce("actions", this, "validateModel", this.args.model);
@@ -44,6 +49,11 @@ export default class ValidatedFormComponent extends Component {
     await model.validate();
 
     if (model.get("isInvalid")) {
+      if (this.config?.features?.scrollErrorIntoView && model.errors[0]?.key) {
+        document
+          .querySelector(`[name=${model.errors[0].key}]`)
+          ?.scrollIntoView();
+      }
       this.runCallback(PROP_ON_INVALID_SUBMIT);
     } else {
       this.runCallback(PROP_ON_SUBMIT);

diff --git a/tests/dummy/app/snippets/config-features.js b/tests/dummy/app/snippets/config-features.js
@@ -0,0 +1,10 @@
+var ENV = {
+  // ...
+  "ember-validated-form": {
+    theme: "bootstrap",
+    features: {
+      scrollErrorIntoView: true,
+    }
+  },
+  // ...
+};
diff --git a/tests/dummy/app/templates/docs/configuration.md b/tests/dummy/app/templates/docs/configuration.md
@@ -33,3 +33,10 @@ For instance:
   {{demo.snippet 'permanent-custom-hint-component-template.hbs' label='permanent-custom-hint.hbs'}}
 {{/docs-demo}}
 <!-- prettier-ignore-end -->
+
+## Other features
+
+If you want to scroll the first invalid field into view, you can set the
+`scrollErrorIntoView` property to `true` (default: false).
+
+{{docs-snippet name='config-features.js' title='config/environment.js'}}
diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js
@@ -12,6 +12,9 @@ module.exports = function (environment) {
       defaults: {
         hint: "permanent-custom-hint",
       },
+      features: {
+        scrollErrorIntoView: false,
+      },
     },
     EmberENV: {
       FEATURES: {