react-admin: Missing items in ArrayInput with SimpleIterator

What you were expecting: When I open posts list and then open post detail with iterated data (backlinks) using ArrayInput and SimpleFormIterator, all backlinks are visible.

What happened instead: No backlink is visible. After page refresh all backlinks are back there.

Steps to reproduce:

Go to the Posts list - api return list of posts without backlinks property, because it’s not needed in the list
Open Post with backlinks (eg. id 3) and go to tab “Miscellaneous” - api return detail of post containing backlinks
You should see list of backlinks but none are there until you refresh the page

I did some debugging and found out that problem is probably inside SimpleFormIterator at lines 59-75. When the detail is loading and fields is empty, the nextId is initialized with 0 value which means ids become empty array. Once the detail is loaded, nextId nor ids is reevaluated and remain as it is which means ids is empty array, but fields contains backlinks

// We need a unique id for each field for a proper enter/exit animation
    // so we keep an internal map between the field position and an auto-increment id
    const nextId = useRef(
        fields && fields.length
            ? fields.length
            : defaultValue
            ? defaultValue.length
            : 0
    );

    // We check whether we have a defaultValue (which must be an array) before checking
    // the fields prop which will always be empty for a new record.
    // Without it, our ids wouldn't match the default value and we would get key warnings
    // on the CssTransition element inside our render method
    const ids = useRef(
        nextId.current > 0 ? Array.from(Array(nextId.current).keys()) : []
    );

Other information:

I suppose it’s related to these issues

Environment

React-admin version: 3.19.2
Last version that did not exhibit the issue (if applicable): Seems like it was working in 3.18.1
React version: 17.0.2
Browser: any

I know the another cause of the issue is that the entity (post in this case) has different shape for list and for detail, but it’s a common use case for use, because some entities can be huge and we need only few simple fields for distinguishing them in a list.

Is it an antipattern for RA to have different entity shapes between endpoints?

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 2
Comments: 23 (9 by maintainers)

Most upvoted comments

I have a very simple workaround. Disable the animation. The form function still work.

<SimpleFormIterator TransitionProps={{ enter: false, exit: false }}>
</SimpleFormIterator>

+20

tong-bluehill on Mar 23, 2022

I have the same problem, when you inspect an element you will see that the reason is “fade-enter” class.

<ul class="RaSimpleFormIterator-root-149">
	<li class="RaSimpleFormIterator-line-150 fade-enter">[...]</li> // hidden element - bug
	<li class="RaSimpleFormIterator-line-150 fade-enter-done">[...]</li> // visible element
	<li class="RaSimpleFormIterator-line-150">[...]</li> // panel for adding new entry 
</ul>

In my case, it doesn’t even help to restore react-admin to v3.0.0. Something wrong with MUI?

DawidMikulski on Jan 31, 2022

The workaround that I detailed above only works until you add a 2nd array item. Then, whenever you edit that record it has the same error because it starts with a defaultValue which has only 1 element, but then while you’re loading a record that has 2 or more elements, it loses the key.

The workaround for v3 that finally did it for me was to only render the ArrayInput after the record was finished loading. Here’s the quick and simple way that I did that. (It could probably be done better, but here it is…)

  /** True if we are CURRENTLY loading. */
  const isLoading = useLoading();
  /** True if we WERE loading. */
  const wasLoadingRef = React.useRef(false);
  /** True if we WERE loading and now we're NOT. */
  const isLoaded = React.useMemo(() => {
    if (isLoading) {
      wasLoadingRef.current = true;
      return false;
    } else {
      return wasLoadingRef.current;
    }
  }, [isLoading]);
  
  return (
    <Edit {...props}>
      <SimpleForm>
        <TextInput source="yada" />
        {isLoaded && (
          <ArrayInput
            source="spec.queries"
            label="Queries"
          >
            <SimpleFormIterator>
              <TextInput source="whatever" />
              {/* ... */}
            </SimpleFormIterator>
          </ArrayInput>
        )}
      </SimpleForm>
    </Edit>

waynebloss on Jun 22, 2022

@horaklukas, I think I misunderstood your issue, I believe this is indeed a bug. The index error was fixed in the last version (3.19.7) but the despairing items’ problem is still there, and it shouldn’t. This is reproducible in your original code-sandbox.

In fact, you have reached some of the same conclusions that in #5289. Which looks right (to me). I’ll have to dig in further on this.

WiXSL on Jan 28, 2022

After #6932 gets merged, we should try if it fixes this issue

WiXSL on Dec 4, 2021