FormDataConsumer component cause rerendering or glitching the input upon selection/reset the value

[tnoct]

What you were expecting:

In the create post form, selecting a value for user from the autocomplete input should be smooth, without glitches or triggering a full component re-render.

What happened instead:

In the create post form, selecting a user value from the autocomplete input causes glitches or triggers a full component re-render. When I move the ReferenceInput component outside of the FormDataConsumer component, the issue is resolved, but it should work even when wrapped inside the FormDataConsumer component.

Steps to reproduce:

Preferably, a sandbox forked for reproducing the code.
https://stackblitz.com/edit/github-uaewfaxm?file=src%2Fposts.tsx

 <Create>
    <SimpleForm>
      <FormDataConsumer<any>>
        {({ formData }) => {
          if (!(formData.someField === 'someFieldValue')) {
            return (
              <ReferenceInput source="userId" reference="users">
                <AutocompleteInput
                  shouldUnregister
                  label="User"
                  optionText={(choice) => `${choice.name} /  (${choice.id})`}
                  // optionValue="userId"
                  noOptionsText="User does'nt exist"
                  isRequired
                  validate={[required('User is Required.')]}
                />
              </ReferenceInput>
            );
          } else return null;
        }}
      </FormDataConsumer>
      <TextInput source="title" />
      <TextInput source="body" multiline rows={5} />

    </SimpleForm>
  </Create>

Other information:
Screeen Cast of issue here
https://github.com/user-attachments/assets/4c6ed69a-e9ac-4b95-851b-7efca0dfc008
Environment

React-admin version: ^5.4.2
Last version that did not exhibit the issue (if applicable): 4.12.0 does not have this issue
React version: ^18.3.1
Browser: chrome

[tnoct]

issue.webm

issue screencast

[tnoct]

Is this the expected behavior when using FormDataConsumer to hide or unhide an input based on another input? I referenced this approach from our documentation.
https://marmelab.com/react-admin/Inputs.html#hiding-inputs-based-on-other-inputs

[tnoct]

This same issue is also present on the edit page of a post, i have make the change in the given sand box you can see that too.

[slax57]

Reproduced. I confirm the flickering is not intended behavior.
However this requires more investigation to understand the root cause.
In any case, thanks for the report!

[djhi]

Unfortunately we had to revert #10417 as it caused issues with our <StackFilters> component. I'm reopening this issue

[tnoct]

Hi @djhi, with all due respect, when can this issue be fixed again?