trigger won't work when not called within event handler

[tswirski]

  <div
     onClick={() => {
          formMethods.trigger(); // this works
          setTimeout(() => formMethods.trigger(), 1000); // this doesn't
      }}
  >

[tswirski]

<div onClick={() => formMethods.trigger()}> THIS WORKS OK</div>

<div onClick={() => { setTimeout(() => { formMethods.trigger(); }, 1000); }} > THIS DOES NOT WORK</div>

[bae080311]

Call trigger outside the event loop. For example:

const { trigger } = useForm();

<div onClick={() => {
  queueMicrotask(() => trigger()); // runs after current event loop
}}>