Aurelia-validation plugin auto scroll in large collections

Framework Knowledge
#1

Hi,

When using aurelia-validation plugin in large collections (many scroll pages on mobile), is there any out-of-the-box solution for scrolling to the validation error? Or do I have to implement it myself?

The only workaround I found for it was to add and id on each row and then call myself scrollIntoView for the affected element:

let invalid = result.results.filter(n => !n.valid);
let first = invalid[0];
if (first.object instanceof QuizDbEntry) {
  // Scroll to top
  Utility.safeScrollIntoView(document.getElementById('quiz-header-row'))
} else {
  let obj = first.object;
  let idx = this.quizEntry.questions.indexOf(obj);
  if (idx > -1) {
    Utility.safeScrollIntoView(document.getElementById('quiz-question-row-' + (idx + 1)));
  }
}
#2

You’d be best served with a custom renderer as there you’ll get access to the DOM element having an Error. In there you can easily add your scrolltologic. Make sure to handle the case for multiple errors by using a debounce or the likes

#3

Hi @zewa666, thanks but it looks like with the custom renderer I’ll have to write a lot more code. Or can I call the default behavior from the custom renderer to display the error message and then do the scroll?

Cheers

#4

Well In usually always have a custom renderer in place to adjust rendering. Honestly no idea whether you could call the original implementations methods.

Alternatively the subscribe(callback: (event: ValidateEvent) => void) Event might be another approach being called after a validation or reset occurs. Dunno if you can obtain the target element using that though.