[docs][Autocomplete] Update virtualization example to use react-window v2 #47054

sai6855 · 2025-10-09T13:18:09Z

closes #46850
address https://mui-org.slack.com/archives/C0757QYLK7V/p1759503478232929

Initially i fixed this issue in #46900 but CI in that PR is failing for some reason i'm not aware of, moving changes to new PR fixed the CI. Additionally this PR also have fix reported by caspardue here #46900 (comment)

Migration to react-window v2 is extremely painful there is no official migration guide. I went through v2 docs and v1 docs to figure out what all changed.

these are all the resources i could find.

Previews of all demos that effected by version upgrade

https://deploy-preview-47054--material-ui.netlify.app/material-ui/react-autocomplete/#virtualization
https://deploy-preview-47054--material-ui.netlify.app/material-ui/react-list/#virtualized-list
https://deploy-preview-47054--material-ui.netlify.app/joy-ui/react-autocomplete/#virtualization (I had to fix joy's demo as well because joy, and material-ui are using same shared react-window package)

Regarding argos failure, I'm not really sure why it's failing. Looking at DOM of both v1 and v2, react-window has removed outerElement support and innerElement support (source), I suspect it is what causing argos issue. I think diff shown in argos is extremly minimal, since it's causing by external library and there is not enough guidance on migrartion, can we approve the change?

mui-bot · 2025-10-09T13:19:18Z

Netlify deploy preview

https://deploy-preview-47054--material-ui.netlify.app/

Bundle size report

Bundle	Parsed size	Gzip size
@mui/material	0B^(0.00%)	0B^(0.00%)
@mui/lab	0B^(0.00%)	0B^(0.00%)
@mui/system	0B^(0.00%)	0B^(0.00%)
@mui/utils	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 229a274

ZeeshanTamboli

@sai6855 Maybe we should migrate our docs demos from react-window and react-virtuoso to @tanstack/react-virtual, given its higher adoption. See: https://npmtrends.com/@tanstack/react-virtual-vs-react-virtualized-vs-react-virtuoso-vs-react-window. cc @siriwatknp

If you think it is not straightforward, I can review this PR. But first, what do you think of migrating to @tanstack/react-virtual?

sai6855 · 2025-10-13T14:02:18Z

@sai6855 Maybe we should migrate our docs demos from react-window and react-virtuoso to @tanstack/react-virtual, given its higher adoption. See: https://npmtrends.com/@tanstack/react-virtual-vs-react-virtualized-vs-react-virtuoso-vs-react-window. cc @siriwatknp

If you think it is not straightforward, I can review this PR. But first, what do you think of migrating to @tanstack/react-virtual?

I agree that @tanstack/react-virtual has higher adoption, but since react-window still has around 3M downloads in the past year and the community is expecting a v2 versions of demos, I think it’s not ideal to completely migrate away from react-window. Maybe we can support both, but removing react-window entirely doesn’t seem ideal to me.

into react-window-v2

docs/data/material/components/autocomplete/Virtualize.tsx

ZeeshanTamboli · 2025-10-13T14:37:40Z

@sai6855 Maybe we should migrate our docs demos from react-window and react-virtuoso to @tanstack/react-virtual, given its higher adoption. See: https://npmtrends.com/@tanstack/react-virtual-vs-react-virtualized-vs-react-virtuoso-vs-react-window. cc @siriwatknp
If you think it is not straightforward, I can review this PR. But first, what do you think of migrating to @tanstack/react-virtual?

I agree that @tanstack/react-virtual has higher adoption, but since react-window still has around 3M downloads in the past year and the community is expecting a v2 versions of demos, I think it’s not ideal to completely migrate away from react-window. Maybe we can support both, but removing react-window entirely doesn’t seem ideal to me.

Agree.

Migration to react-window v2 is extremely painful there is no official migration guide

It's extremely painful to review as well. 😓

docs/data/material/components/autocomplete/Virtualize.tsx

docs/data/material/components/autocomplete/Virtualize.js

into react-window-v2

sai6855 · 2025-10-15T06:39:32Z

@ZeeshanTamboli Cleaned up code and fixed all issues reported by you here 478696e

ZeeshanTamboli

Just these two comments. Rest looks good to me! Will give a final review later.

docs/data/material/components/autocomplete/Virtualize.tsx

docs/package.json

sai6855 · 2025-10-23T06:54:18Z

Just these two comments. Rest looks good to me! Will give a final review later.

@ZeeshanTamboli Both are fixed now

ZeeshanTamboli

@sai6855 When I am opening the popup of the Material UI Autocomplete Virtualization demo locally, I am getting the following error:

NaN is an invalid value for the top css style property.

into react-window-v2

sai6855 · 2025-10-24T07:25:37Z

@sai6855 When I am opening the popup of the Material UI Autocomplete Virtualization demo locally, I am getting the following error:

NaN is an invalid value for the top css style property.

@ZeeshanTamboli can you check now? The error occurred because the top key was missing in the style object. Setting value as 0 fixed it.
Related commit: mui/material-ui#767f49c

ZeeshanTamboli

@sai6855 Sorry for not finding it earlier, but I found two issues in Joy UI's Autocomplete Virtualization demo:

Keyboard Navigation is not working by scrolling to the new options on ArrowDown, PageDown, Home, End key presses.
Same console error as #47054 (review)

Actually Joy UI isn't maintained anymore. Can we avoid upgrading react-window in it somehow?

You can do aliasing like:

{
  "dependencies": {
    "react-window": "^2.2.1",
    "react-window-v1": "npm:react-window@^1.8.11"
  }
}

But I think it would be better to fix the issues.

sai6855 · 2025-10-25T06:34:26Z

@sai6855 Sorry for not finding it earlier, but I found two issues in Joy UI's Autocomplete Virtualization demo:

Keyboard Navigation is not working by scrolling to the new options on ArrowDown, PageDown, Home, End key presses.

Same console error as #47054 (review)

Actually Joy UI isn't maintained anymore. Can we avoid upgrading react-window in it somehow?

You can do aliasing like:
{
  "dependencies": {
    "react-window": "^2.2.1",
    "react-window-v1": "npm:react-window@^1.8.11"
  }
}
But I think it would be better to fix the issues.

As joy-ui isn't matained anymore, i haven't spent time fixing it. Additionally i tried not upgrading joy-ui version but it's not possible as both material-ui and joy-ui are using same package.

Do you think we should introduce aliasing Given that all this code will be removed anyway?

ZeeshanTamboli · 2025-10-25T06:50:11Z

As joy-ui isn't matained anymore, i haven't spent time fixing it. Additionally i tried not upgrading joy-ui version but it's not possible as both material-ui and joy-ui are using same package.

Do you think we should introduce aliasing Given that all this code will be removed anyway?

Aliasing would just complicate dependency maintenance by adding two versions of react-window for a short-term fix. It’s probably simpler to update the Joy demo to match the Material UI virtualization code since the fix should be almost identical and quick to apply.

into react-window-v2

sai6855 · 2025-10-27T07:48:41Z

@ZeeshanTamboli keyboard navigation issue is fixed in joy-ui component, There are still few styling differences in joy-ui component, i recommend we ignore those and move forward and merge this PR as joy-ui is not maintained anymore. If required we can fix it in another PR

ZeeshanTamboli

Looks good. Nice work!

[docs] Update react-window package

462a690

sai6855 marked this pull request as draft October 9, 2025 13:18

fix code

557b03f

sai6855 changed the title ~~[docs] Update react-window package~~ [docs][Autocomplete] Update virtualization example to use react-window v2 Oct 9, 2025

sai6855 added docs Improvements or additions to the documentation. scope: autocomplete Changes related to the autocomplete. This includes ComboBox. support: docs-feedback Feedback from documentation page. labels Oct 9, 2025

sai6855 marked this pull request as ready for review October 9, 2025 13:58

sai6855 requested review from ZeeshanTamboli, mj12albert and siriwatknp October 9, 2025 13:58

Merge branch 'master' into react-window-v2

de4dc11

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 13, 2025

ZeeshanTamboli reviewed Oct 13, 2025

View reviewed changes

sai6855 added 2 commits October 13, 2025 19:44

Merge branch 'master' into react-window-v2

8170133

Merge branch 'react-window-v2' of https://github.com/sai6855/material-ui

3cef218

into react-window-v2

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Oct 13, 2025

fix-pnpm-loc

0d0c1f0

ZeeshanTamboli reviewed Oct 13, 2025

View reviewed changes

docs/data/material/components/autocomplete/Virtualize.tsx Outdated Show resolved Hide resolved

sai6855 and others added 3 commits October 13, 2025 20:14

remove margin,padding

a94694c

Merge branch 'master' into react-window-v2

ef84603

pnpm dedupe

082464d

ZeeshanTamboli reviewed Oct 14, 2025

View reviewed changes

docs/data/material/components/autocomplete/Virtualize.tsx Outdated Show resolved Hide resolved

ZeeshanTamboli reviewed Oct 14, 2025

View reviewed changes

docs/data/material/components/autocomplete/Virtualize.tsx Outdated Show resolved Hide resolved

ZeeshanTamboli reviewed Oct 14, 2025

View reviewed changes

docs/data/material/components/autocomplete/Virtualize.tsx Outdated Show resolved Hide resolved

ZeeshanTamboli reviewed Oct 14, 2025

View reviewed changes

docs/data/material/components/autocomplete/Virtualize.js Show resolved Hide resolved

zeeshan review

478696e

sai6855 and others added 2 commits October 15, 2025 11:52

Merge branch 'react-window-v2' of https://github.com/sai6855/material-ui

aa6947b

into react-window-v2

Merge branch 'master' into react-window-v2

44a902c

ZeeshanTamboli reviewed Oct 15, 2025

View reviewed changes

docs/data/material/components/autocomplete/Virtualize.tsx Outdated Show resolved Hide resolved

docs/package.json Outdated Show resolved Hide resolved

Meklo mentioned this pull request Oct 20, 2025

Migrate to react-window v2 gridsuite/gridstudy-app#3396

Open

sai6855 and others added 3 commits October 23, 2025 11:51

update-version

97ac177

fix

89b8747

Merge branch 'master' into react-window-v2

56cb266

sai6855 requested a review from ZeeshanTamboli October 23, 2025 06:54

Merge branch 'master' into react-window-v2

96d0e30

ZeeshanTamboli reviewed Oct 24, 2025

View reviewed changes

sai6855 and others added 4 commits October 24, 2025 12:28

fix NaN error

767f49c

Merge branch 'react-window-v2' of https://github.com/sai6855/material-ui

6a5fae9

into react-window-v2

fix

c524561

Update next-env.d.ts

b052040

ZeeshanTamboli reviewed Oct 25, 2025

View reviewed changes

sai6855 added 6 commits October 26, 2025 22:12

fix joy

5b9b40a

Merge branch 'react-window-v2' of https://github.com/sai6855/material-ui

af380ce

into react-window-v2

fix

a32bf95

fix

0c38609

fix

f7d5a25

fix

85eb361

Merge branch 'master' into react-window-v2

229a274

ZeeshanTamboli approved these changes Oct 27, 2025

View reviewed changes

sai6855 merged commit d8b53b7 into mui:master Oct 27, 2025
22 checks passed

Uh oh!

Uh oh!

[docs][Autocomplete] Update virtualization example to use react-window v2 #47054

[docs][Autocomplete] Update virtualization example to use react-window v2 #47054

Conversation

sai6855 commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Netlify deploy preview

Bundle size report

Uh oh!

ZeeshanTamboli left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sai6855 commented Oct 13, 2025

Uh oh!

Uh oh!

ZeeshanTamboli commented Oct 13, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sai6855 commented Oct 15, 2025

Uh oh!

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sai6855 commented Oct 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ZeeshanTamboli left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sai6855 commented Oct 24, 2025

Uh oh!

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

Uh oh!

sai6855 commented Oct 25, 2025

Uh oh!

ZeeshanTamboli commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sai6855 commented Oct 27, 2025

Uh oh!

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sai6855 commented Oct 9, 2025 •

edited

Loading

mui-bot commented Oct 9, 2025 •

edited

Loading

ZeeshanTamboli left a comment •

edited

Loading

sai6855 commented Oct 23, 2025 •

edited

Loading

ZeeshanTamboli left a comment •

edited

Loading

ZeeshanTamboli commented Oct 25, 2025 •

edited

Loading