Skip to content

Missing error messages when initialValue is undefined in the last result object #1003

@ham3dz

Description

@ham3dz

Describe the bug and the expected behavior

I was mocking the result of a form submission in a test but couldn’t get the expected render. After debugging, I realized that adding an empty object for initialValue in the mocked object fixes the issue. Note that the initialValue in SubmissionResult is optional.

Here’s the mock I created for the React Router/Remix component:

    const Stub = createRoutesStub([
      {
        path: '/',
        Component: ComponentUnderTheTest,
        action(): SubmissionResult<string[]> {
          return {
            status: 'error',

            // it works with an empty object, but if I comment this line it will cause the test to fail
            initialValue: {},

            error: {
              name: ['some error'],
            },
            fields: ['name'],
          };
        },
      },
    ]);

   expect(screen.getByRole('textbox', {
        description: 'some error',
      })).toBeInTheDocument();

Conform version

v1.8.2

Steps to Reproduce the Bug or Issue

Use the following snippet in a React component:

  const lastResult = useMemo(() => {
    return {
      status: 'error',

      // uncoment this line for expected behavior 
      // initialValue: {},
      error: {
        name: ['some error message'],
      },
      fields: ['name'],
    }
  }, []);

  const [form, fields] = useForm({
    lastResult,
  });

  console.log('Error message', fields.name.errors);

It’s expected to print some error message in the logs, but it doesn’t.

What browsers are you seeing the problem on?

Chrome

Screenshots or Videos

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions