[Masonry] Doesn't respond to resize of the container, broke in 5.0.0-alpha.64
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 35/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript, react
- Domain
- frontend
Research direction
Start by examining the Masonry component's useEffect and the ResizeObserver setup, comparing the change described in commit 8e4c482d99. Verify that resizing the parent container causes the column count to recalculate, including when no child changes, and confirm the behavior against a focused test or reproduction.
Written by the indexing model from the issue text.
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
I've been using <Masonry columns={1} > and when the container is wide enough, this control has been great at automagically creating more columns when the container is wide enough. And likewise if I start with a large container and make it smaller, it would auto-decrease the number of columns to make everything fit.
Since upgrading to latest version, alpha.68, Masonry correctly calculates number of columns to start with but then no matter how much you resize the window, it will never change the column count like it used to.
Expected behavior 🤔
I'd expect when the parent container is resized, Masonry would auto-adjust number of columns it is displaying
Steps to reproduce 🕹
No response
Context 🔦
I'm looking at the diff between commit 8e4c482d99, "observe every masonry child to trigger computation when needed" and it appears that inside useEffect() where in the past resizeObserver used to be hooked up to the container and the first child, the change was done to loop through all the children, not just the first one, but I think container was inadvertently missed so now unless one of the children changes, resizeHandler never gets invoked.
Your environment 🌎
No response
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from mui/material-ui
-
type: new feature waiting for 👍
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
mui/material-ui#48254 · 3 comments · 1 reaction ·
-
has workaround scope: avatar waiting for 👍
Difficulty 2/5 1-3 hours Newbie friendliness 64/100
mui/material-ui#48190 · 5 comments ·
-
has workaround scope: typography type: new feature waiting for 👍
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
mui/material-ui#46488 · 2 comments · 1 reaction ·
-
has workaround scope: text field type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
mui/material-ui#37216 · 6 comments ·
-
docs scope: autocomplete
Difficulty 1/5 1-3 hours Newbie friendliness 68/100
mui/material-ui#35713 · 5 comments ·
Similar issues
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
optimization optimization:agents-md-curator
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
githubnext/gh-aw-cao#13143 ·
-
status: needs triage
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100