adobe / adobe/react-spectrum

ResizableTableContainer can have "layout flash" on initial render and refresh

Open
#7,499 4 comments 2 reactions 0 assignees View on GitHub
bug RAC
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

ResizableTableContainer seems to cause a "layout flash" on initial render and refresh if the width of the table is wider than the minimum widths of all its columns.

This is reproducible using the Stock Table example alone in a web page: https://react-spectrum.adobe.com/react-aria/examples/stock-table.html

### 🤔 Expected Behavior?

Resizable tables should not have a "layout flash" on initial render and refresh.

### 😯 Current Behavior

Resizable tables can have a "layout flash" on initial render and refresh.

### 💁 Possible Solution

_No response_

### 🔦 Context

Impacts JustD: https://github.com/irsyadadl/justd/issues/247

### 🖥️ Steps to Reproduce

- Render the Stock Table Example (https://react-spectrum.adobe.com/react-aria/examples/stock-table.html) in a web page that is wider than the minimum widths of all the columns.
- Initial render has "layout flash"
- Refreshing page results in "layout flash"

CodeSandbox: https://codesandbox.io/p/github/mw10013/rr-rac-resizable-table-container/main
StackBlitz: https://stackblitz.com/~/github.com/mw10013/rr-rac-resizable-table-container?file=app/components/StockTableExample.tsx

NB: Enlarge the preview pane so that it is wider than the minimum widths of all the table columns. Refreshing the preview pane will cause a "layout flash" in the first two tables.

The reproduction shows 3 tables:

- Stock table example
- Stock table example with `min-w-full` on the table.
- Stock table example with `min-w-full` on the table and no `defaultWidth`'s. There is no "layout flash" with this one.

### Version

1.5.0

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

MacOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.