emptyText prop on ArrayField has no effect.

[martdavidson]

What you were expecting:
Expected emptyText to be output from an ArrayField when there are no items in that array.

What happened instead:
Instead, we get an empty <DataGrid> (or I assume whatever child) with the table headers, and no data.

Steps to reproduce:
Can do something like:

<ArrayField
      label={'YouTube Videos'}
      source={'source'}
      emptyText={'None'}
    >
      <Datagrid>
        <TextField source={'videoId'} />
        <NumberField source={'weight'} />
      </Datagrid>
    </ArrayField>

And the result is:

Instead of the empty text.

Environment

• React-admin version: 3.14.3
• React version: 17.0.1
• Browser: Chrome 89.0.4389.128 on Mac.

[djhi]

Indeed, it hasn't been implemented for ArrayField. Thanks for the report!

[fzaninotto]

I think <ArrayField> shouldn't implement emptyText, just like <ReferenceManyField> and <ReferenceArrayField>. It's the child's responsibility (e.g. <Datagrid>, <SimpleList>) to display an alternative empty component when empty.

So I'm transforming this into a documentation issue: in the list of common field props, it should be mentioned that emptyText doesn't concern ArrayField and the likes.

[martdavidson]

Thanks for bringing that prop to my attention, I upgraded my version and see it now.

It doesn't solve this issue though, consider this code:

<ArrayField
      label={'Twitch Streams'}
      source={'mediaContentDetails.twitchStreams'}
      sortable={false}
    >
      <Datagrid empty={<p>Empty</p>}>
        <TextField source={'username'} />
        <NumberField source={'weight'} />
      </Datagrid>
</ArrayField>

So in our case mediaContentDetails can be null, so twitchStreams doesn't exist and results in:

Which is why I would argue having an empty prop for ArrayField makes sense (to me). I don't care what child is rendering in an ArrayField (DataGrid, SimpleList, etc), I would expect the ArrayField to short circuit if source value is either null / undefined / an empty list.

Let me know what you think.

Edit: Or maybe this is a bug and DataGrid should be checking for null / undefined?

[martdavidson]

@fzaninotto Any thoughts on the above?

[fzaninotto]

ArrayField should always put an array of ids in the ListContext. If Datagrid receives a null value for ids, then it may be a bug. Can you build a CodeSandbox to reproduce the issue?

[martdavidson]

I probably won't get to that for a while, so if you have an easily accessible API that you can test against that's probably going to be faster.

[martdavidson]

@fzaninotto (Sorry to tag, just in case you only get notifications when tagged)

I got to this sooner than I thought, here's a recreation:

https://github.com/martdavidson/6179-recreation

Check that out, run yarn install then yarn start, view the only post, and you'll see that even though the Datagrid in the PostShow component has an empty prop, it's still showing an empty table.

[fzaninotto]

@martdavidson Thanks, I managed to reproduce the issue with ArrayField, I'll open a PR to fix it.

[fzaninotto]

The documentation problem remains: we should explicitly say that emptyText doesn't work on array fields.