On submit validation failure, focus on first invalid input about reform HOT 5 CLOSED

// FormWrapper.res
module Make = (Config: ReForm.Config) => {
  include ReForm.Make(Config)
  module ComparableField = Belt.Id.MakeComparable({
    type t = field
    let cmp = Pervasives.compare
  })

  type fields = Belt.MutableMap.t<ComparableField.t, Dom.element, ComparableField.identity>

  type registerFieldFn = (field, Js.Nullable.t<Dom.element>) => unit

  let useScrollToField = (~offsetTop=0, ()) => {
    let fieldsRef: React.ref<fields> = React.useRef(
      Belt.MutableMap.make(~id=module(ComparableField)),
    )

    let register = (fieldName, fieldRef) => {
      switch fieldRef->Js.Nullable.toOption {
      | Some(el) => fieldsRef.current->Belt.MutableMap.set(fieldName, el)
      | None => ()
      }
    }

    let scrollToFieldWithError = ({state}: onSubmitAPI) => {
      state.fieldsState
      ->Belt.Array.get(0)
      ->Belt.Option.map(((field, _)) => field)
      ->Belt.Option.flatMap(field => fieldsRef.current->Belt.MutableMap.get(field))
      ->Belt.Option.map(el => DomApiExtra.Window.scrollTo(0, el->DomApiExtra.offsetTop - offsetTop))
      ->ignore
    }

    (register, scrollToFieldWithError)
  }

}

// MyApp.res
module Lenses = %lenses(
 type state = {
  name: string,
 } 
)
module MyForm = FormWrapper.Make(Lenses)
@react.component
let make = () => {
   // reform stuff here (useForm, etc)
  let (registerField, scrollWhenFail) = MyForm.useScrollToField()
  
  <input ref={Field(Name)->registerField->ReactDOM.Ref.callbackDomRef}  />
}