Form validation error in modal scrolls website to bottom

Env: Pro 6.8.12, Cornerstone Forms 1.0.10.

Not critical but somewhat annoying: When a Cornerstone Form lives inside a Modal (or Off-Canvas) and submission fails validation, the page behind the modal scrolls to the bottom.

Cause: I think on validation error, cornerstone-forms.js scrolls the window to the first errored input:

  let t = r.querySelectorAll(".cs-input.is-error")[0];
  let n = t.closest(".cs-form-input-container"), s = n || t;
  setTimeout(function(){ window.csGlobal.scrollTo(s) }, 50);

The target sits inside a position: fixed modal that has its own scroll area (.x-modal-content-scroll-area), so csGlobal.scrollTo computes a bogus document offset and scrolls the window to the page bottom.

Repro: Put a Form element inside a Modal → force a validation error → the page behind the modal jumps to the bottom.

Suggested fix: If the error input is inside a .x-modal / .x-off-canvas (or any element with its own scroll container), scroll that container into view instead of the window — or skip the window scroll entirely in that case, since the modal is most probably already in view.

Workaround I am currently using: wrap window.csGlobal.scrollTo to no-op when the target is .closest('.x-modal, .x-off-canvas').

2 Likes

I’ll try to get this fix into the next Forms point release. Thanks for sending this my way. Have a great weekend.

1 Like