Skip to content

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

Open
@mw10013

Description

@mw10013

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: irsyadadl/justd#247

🖥️ Steps to Reproduce

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    RACbugSomething isn't working

    Type

    No type

    Projects

    • Status

      🔬 To Investigate / Verify

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions