Skip to content

Focus error fields when submission fails

Grigor Malo requested to merge scroll-and-focus-form-error-field into master

Fixes one of the points of #68 (closed) -> Not able to progress to submit the form due to error, but errors are not in focus and so therefore can’t find/fix

  • create a function inside Form component to handle validation errors on form submission
    • if the field with errors is in the view port, focus it
    • if the field with errors is not in the view port, scroll to it and focus
  • this behavior can be disabled by passing scrollErrorIntoView={false} to the form
  • custom function can be passed to form with onFinishFailed prop
Edited by Grigor Malo

Merge request reports