Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mw10013 opened this issue Dec 10, 2024 · 3 comments
Labels
bug Something isn't working RAC

Comments

@mw10013
Copy link

mw10013 commented Dec 10, 2024

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

@LFDanLu
Copy link
Member

LFDanLu commented Dec 11, 2024

I see a flash in the docs but I'm unsure if that is docs side or from the table itself. Mind updating your stackblitz, it doesn't seem to run for me.

@mw10013
Copy link
Author

mw10013 commented Dec 13, 2024

@LFDanLu: I put it in codesandbox.io and hopefully it will run for you there: https://codesandbox.io/p/github/mw10013/rr-rac-resizable-table-container/main

@LFDanLu
Copy link
Member

LFDanLu commented Dec 13, 2024

@mw10013 Thanks! I see what you mean now, thanks for reporting this. Will need to dig into the TableColumnLayout calculations to see if we can handle this defaultColumn width case better

@LFDanLu LFDanLu added bug Something isn't working RAC labels Dec 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working RAC
Projects
Status: 🩺 To Triage
Development

No branches or pull requests

2 participants