External module "components/decorators"

Const focusInvalidFormDecorator

• focusInvalidFormDecorator<FormValues>(getFormElement: function, formGroupSelector: Selector, invalidElementSelector: Selector | undefined, smoothScroll?: boolean | undefined): Decorator<FormValues>

• Focuses and scrolls into view the first invalid form element inside a form after a failed form submission.

  See https://webaim.org/techniques/formvalidation/

  For smooth scrolling behavior you might want to use the smoothscroll polyfill http://iamdustan.com/smoothscroll/

  If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.

  For IE support you might want to use a closest() polyfill, such as from https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill

  Type parameters

  • FormValues

  Parameters

  • getFormElement: function

    a function that returns the form element to focus

    • • (): Element | null

      • Returns Element | null

  • formGroupSelector: Selector

    a CSS selector passed to the closest() method of an invalid form input that identifies the element that contains both the form input and its label. This form group element will be scrolled into view so that both the input and its label are visible.

  • invalidElementSelector: Selector | undefined

  • Default value smoothScroll: boolean | undefined = undefined

    true for smooth scrolling, false otherwise

  Returns Decorator<FormValues>