How to properly validate form after values are set

[taras-d]

In code below I'm trying to validate form right after values are set.
Form data is fetched from backend and needs to be validated in case of invalid values.

import { useForm } from '@mantine/form';
import { TextInput, Button, Container } from '@mantine/core';
import { useEffect } from 'react';

function loadData() {
  // assume data is fetched via http request
  return Promise.resolve({ title: 'title' });
}

export function Test() {
  const form = useForm({
    initialValues: {
      title: '',
      description: '',
    },
    validate: {
      title: val => val ? null : 'Title is required',
      description: val => val ? null : 'Description is required',
    }
  });

  useEffect(() => {
    loadData().then(data => {
      form.setValues(data);  // <- set data
      form.validate();       // <- validate
    });
  }, []);

  function handleSubmit() {
    console.log(form.values);
  }

  return (
    <Container m={20} maw={400}>
      <form onSubmit={form.onSubmit(handleSubmit)}>
        <TextInput label="Title" {...form.getInputProps('title')} mb={10} />
        <TextInput label="Description" {...form.getInputProps('description')} mb={10} />
        <Button type="submit">Submit</Button>
      </form>
    </Container>
  );
}

But it not work as I expect. Title field is filled but showing error (see screen below)

How to properly validate form after values are set? Or maybe I'm doing something wrong?

[rtivital]

You can wrap form.validate in setTimeout to wait for react state change.

[taras-d]

It does not help. Even with 1s timeout.
And looks like form values inside timeout callback holds obsolete values

      form.setValues(data);
      setTimeout(() => {
        console.log(form.values); // <- logs { title: '', description: '' }
        form.validate();
      }, 1000);

[samthomson]

Did you solve this? I have the same issue