We have Admin Extension that has rendering issues when using s-table with slots defined. In Shopify App in iOS, it sometimes does not render some of slots. You need to either change orientation of the device from the portrait mode to landscape and back to solves it, or to refresh the app/page.
We observe this on different iOS devices, mainly latest iOS with latest Shopify App.
I would like to add that for few rows, it works OK. But if there are more rows in the table or more tables on one page, it behaves even more weird. For example: first table is rendered wrong with slots missing, but second table on the page is rendered incorrectly just for first few rows and rest is rendered correctly. It is not predictable at all.
Case A
When I load the page, the button is missing:
When I change orientation to landscape:
When I change it back:
Example markup:
<s-table {...(isSearching ? { loading: true } : {})}>
<s-table-header-row>
<s-table-header listSlot="primary">
{t('search.results.column.customer')}
</s-table-header>
<s-table-header
listSlot="secondary"
format="numeric"
>
{t('search.results.column.points')}
</s-table-header>
<s-table-header
listSlot="inline"
format="numeric"
>
{t('search.results.column.actions')}
</s-table-header>
</s-table-header-row>
<s-table-body>
{resultsToShow.map((c) => {
const numericId = getNumericCustomerIdFromGid(c.id);
return (
<s-table-row key={c.id}>
<s-table-cell>
{c.displayName}
</s-table-cell>
<s-table-cell>
{c.points}
</s-table-cell>
<s-table-cell>
<s-button
onClick={() => navigate(`/app/customer/${numericId}`)}
variant="primary"
>
{t('search.results.manage')}
</s-button>
</s-table-cell>
</s-table-row>
);
})}
</s-table-body>
</s-table>
Case B
When I load the page, two elements are missing:
After re-orientation:
Example markup:
<s-table {...(isLoadingResults ? { loading: true } : {})}>
<s-table-header-row>
<s-table-header listSlot="kicker">
{t('activity.column.when')}
</s-table-header>
<s-table-header listSlot="primary">
{t('activity.column.customer')}
</s-table-header>
<s-table-header listSlot="inline">
{t('activity.column.change')}
</s-table-header>
<s-table-header listSlot="labeled">
{t('activity.column.branch')}
</s-table-header>
<s-table-header listSlot="labeled">
{t('activity.column.staff')}
</s-table-header>
<s-table-header listSlot="labeled">
{t('activity.column.source')}
</s-table-header>
<s-table-header listSlot="labeled">
{t('activity.column.note')}
</s-table-header>
</s-table-header-row>
<s-table-body>
{rows.map((
row,
idx,
) => {
const numericId = getNumericCustomerIdFromGid(row.customer.id);
return (
<s-table-row key={`${row.entry.createdAt}-${row.customer.id}-${idx}`}>
<s-table-cell>
{formatDate(row.entry.createdAt)}
</s-table-cell>
<s-table-cell>
<s-link href={`/app/customer/${numericId}`}>
{row.customer.displayName}
</s-link>
</s-table-cell>
<s-table-cell>
<s-stack
direction="inline"
gap="small-200"
align-items="center"
>
<s-badge tone={row.entry.balanceChange >= 0 ? 'success' : 'critical'}>
{formatBalanceChange(row.entry.balanceChange)}
</s-badge>
{row.entry.source === SOURCE.MANUAL && (
<s-badge tone="caution">
{t('customer.manualBadge')}
</s-badge>
)}
</s-stack>
</s-table-cell>
<s-table-cell>
{getBranchLabel(row.entry.branch) ?? t('common.dash')}
</s-table-cell>
<s-table-cell>
{formatEmployeeName(
row.entry,
t,
)}
</s-table-cell>
<s-table-cell>
<EntrySource entry={row.entry} />
</s-table-cell>
<s-table-cell>
{formatEntryNote(
row.entry,
t,
)}
</s-table-cell>
</s-table-row>
);
})}
</s-table-body>
</s-table>