Skip to content

TableView doesn't resize properly when wrapped in React.StrictMode #2249

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

Closed
LFDanLu opened this issue Aug 25, 2021 · 2 comments
Closed

TableView doesn't resize properly when wrapped in React.StrictMode #2249

LFDanLu opened this issue Aug 25, 2021 · 2 comments
Labels
bug Something isn't working strict mode

Comments

@LFDanLu
Copy link
Member

LFDanLu commented Aug 25, 2021

🐛 Bug Report

When wrapped in React.StrictMode, TableView's ScrollView doesn't adjust its height properly when items are removed. The height remains the same as before the items were removed, allowing the user to scroll the TableView's contents even if the content now fits in the provided height without overflow.

🤔 Expected Behavior

TableView's scrollview height should adjust itself automatically when items are removed/added

😯 Current Behavior

TableView's scrollview height doesn't adjust itself automatically when items are removed/added

💁 Possible Solution

Not sure, would need to figure out why React.StrictMode is causing this behavior. Feels similar to the other collection component bugs (ListBox, etc) strict mode issues.

🔦 Context

💻 Code Sample

https://codesandbox.io/s/zealous-villani-g4rbw?file=/src/App.js

🌍 Your Environment

Software Version(s)
react-spectrum 3.13
Browser . all
Operating System . MacOS

🧢 Your Company/Team

🕷 Tracking Issue (optional)

@LFDanLu LFDanLu added bug Something isn't working strict mode labels Aug 25, 2021
@LFDanLu
Copy link
Member Author

LFDanLu commented Aug 25, 2021

linking to umbrella issue: #779
Some investigation done for this specific case
code flow:

this._setContentSize(this.layout.getContentSize());
->
contentSize={state.contentSize}
->
<div role="presentation" style={{width: contentSize.width, height: contentSize.height, pointerEvents: isScrolling ? 'none' : 'auto', position: 'relative', ...innerStyle}}>

In the non-strict mode case this is the size output/updates when removing the items via the button in the sandbox example:
image

in the strict mode case:
image

note the stale(?) contentHeight in the strict mode case that gets provided to the ScrollView. The same correct height is calculated and set but the stale height is the one used.

@LFDanLu
Copy link
Member Author

LFDanLu commented Aug 3, 2022

Closing in favor of the umbrella strict mode issue #779

@LFDanLu LFDanLu closed this as completed Aug 3, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working strict mode
Projects
None yet
Development

No branches or pull requests

1 participant