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

[TextareaAutosize] Fix infinite rendering loop #16708

Merged
merged 2 commits into from Jul 24, 2019

Conversation

mcdougal
Copy link
Contributor

@mcdougal mcdougal commented Jul 24, 2019

In Firefox, the value of scrollHeight is unstable. In the <TextareAutosize> component, the scrollHeight of the hidden <textarea> sometimes changes depending on the height of the parent element. This can cause an infinite rendering loop inside the syncHeight handler.

Adding a top: 0 style to the hidden <textarea> fixes this problem in Firefox, and the component continues to work in Chrome, IE and Safari.

Closes #16685

  • I have followed (at least) the PR section of the contributing guide.
  • Ran prettier
  • Ran linter
  • Ran <TextareaAutosize /> tests
  • Manually tested a previously failing example in Chrome, Firefox, IE and Safari

In Firefox, the value of `scrollHeight` is unstable: in the `<TextareAutosize>` component, the `scrollHeight` of the hidden `<textarea>` sometimes changes depending on the height of the parent element. This can cause an infinite rendering loop inside the `syncHeight` handler.

Adding a `top: 0` style to the hidden `<textarea>` fixed this problem in Firefox, and the component continued to work in Chrome, IE and Safari.
@mcdougal
Copy link
Contributor Author

I did my best to follow the contributing guidelines. Let me know if I need to change anything.

I would have made a test to go with this bug fix, but it seems like this would be very difficult to reproduce in Enzyme given it is a quirk in Firefox.

@mui-pr-bot
Copy link

mui-pr-bot commented Jul 24, 2019

Details of bundle changes.

Comparing: 4b96581...bd240db

bundle parsed diff gzip diff prev parsed current parsed prev gzip current gzip
@material-ui/core 0.00% -0.00% 326,639 326,643 90,212 90,210
@material-ui/core/Paper 0.00% 0.00% 68,161 68,161 20,407 20,407
@material-ui/core/Paper.esm 0.00% 0.00% 61,960 61,960 19,210 19,210
@material-ui/core/Popper 0.00% 0.00% 28,957 28,957 10,426 10,426
@material-ui/core/Textarea +0.07% 🔺 +0.04% 🔺 5,534 5,538 2,368 2,369
@material-ui/core/TrapFocus 0.00% 0.00% 3,808 3,808 1,600 1,600
@material-ui/core/styles/createMuiTheme 0.00% 0.00% 16,155 16,155 5,812 5,812
@material-ui/core/useMediaQuery 0.00% 0.00% 3,098 3,098 1,315 1,315
@material-ui/lab 0.00% 0.00% 141,883 141,883 43,669 43,669
@material-ui/styles 0.00% 0.00% 51,577 51,577 15,404 15,404
@material-ui/system 0.00% 0.00% 15,570 15,570 4,436 4,436
Button 0.00% 0.00% 79,771 79,771 24,357 24,357
Modal 0.00% 0.00% 14,631 14,631 5,225 5,225
Portal 0.00% 0.00% 3,484 3,484 1,565 1,565
Rating 0.00% 0.00% 70,524 70,524 22,086 22,086
Slider 0.00% 0.00% 75,295 75,295 23,337 23,337
colorManipulator 0.00% 0.00% 3,904 3,904 1,543 1,543
docs.landing 0.00% 0.00% 51,259 51,259 13,537 13,537
docs.main 0.00% 0.00% 580,627 580,631 190,465 190,467
packages/material-ui/build/umd/material-ui.production.min.js 0.00% -0.00% 301,043 301,047 86,560 86,558
docs: / 0.00% 0.00% 55,200 55,200 -1 -1
docs: /_app 0.00% 0.00% 136,000 136,000 -1 -1
docs: /_error 0.00% 0.00% 2,110 2,110 -1 -1
docs: /blog/2019-developer-survey-results 0.00% 0.00% 13,600 13,600 -1 -1
docs: /blog/april-2019-update 0.00% 0.00% 4,620 4,620 -1 -1
docs: /blog/june-2019-update 0.00% 0.00% 2,200 2,200 -1 -1
docs: /blog/march-2019-update 0.00% 0.00% 3,180 3,180 -1 -1
docs: /blog/material-ui-v4-is-out 0.00% 0.00% 22,500 22,500 -1 -1
docs: /blog/may-2019-update 0.00% 0.00% 2,750 2,750 -1 -1
docs: /components/about-the-lab 0.00% 0.00% 6,370 6,370 -1 -1
docs: /components/app-bar 0.00% 0.00% 132,000 132,000 -1 -1
docs: /components/autocomplete 0.00% 0.00% 304,000 304,000 -1 -1
docs: /components/avatars 0.00% 0.00% 26,600 26,600 -1 -1
docs: /components/badges 0.00% 0.00% 60,600 60,600 -1 -1
docs: /components/bottom-navigation 0.00% 0.00% 26,900 26,900 -1 -1
docs: /components/box 0.00% 0.00% 32,800 32,800 -1 -1
docs: /components/breadcrumbs 0.00% 0.00% 98,800 98,800 -1 -1
docs: /components/buttons 0.00% 0.00% 233,000 233,000 -1 -1
docs: /components/cards 0.00% 0.00% 72,400 72,400 -1 -1
docs: /components/checkboxes 0.00% 0.00% 65,000 65,000 -1 -1
docs: /components/chips 0.00% 0.00% 114,000 114,000 -1 -1
docs: /components/click-away-listener 0.00% 0.00% 13,300 13,300 -1 -1
docs: /components/container 0.00% 0.00% 13,300 13,300 -1 -1
docs: /components/css-baseline 0.00% 0.00% 20,100 20,100 -1 -1
docs: /components/dialogs 0.00% 0.00% 220,000 220,000 -1 -1
docs: /components/dividers 0.00% 0.00% 50,500 50,500 -1 -1
docs: /components/drawers 0.00% 0.00% 225,000 225,000 -1 -1
docs: /components/expansion-panels 0.00% 0.00% 83,700 83,700 -1 -1
docs: /components/grid 0.00% 0.00% 152,000 152,000 -1 -1
docs: /components/grid-list 0.00% 0.00% 56,800 56,800 -1 -1
docs: /components/hidden 0.00% 0.00% 54,700 54,700 -1 -1
docs: /components/icons 0.00% 0.00% 145,000 145,000 -1 -1
docs: /components/links 0.00% 0.00% 51,900 51,900 -1 -1
docs: /components/lists 0.00% 0.00% 155,000 155,000 -1 -1
docs: /components/menus 0.00% 0.00% 88,500 88,500 -1 -1
docs: /components/modal 0.00% 0.00% 37,300 37,300 -1 -1
docs: /components/no-ssr 0.00% 0.00% 15,800 15,800 -1 -1
docs: /components/paper 0.00% 0.00% 9,510 9,510 -1 -1
docs: /components/pickers 0.00% 0.00% 188,000 188,000 -1 -1
docs: /components/popover 0.00% 0.00% 67,700 67,700 -1 -1
docs: /components/popper 0.00% 0.00% 113,000 113,000 -1 -1
docs: /components/portal 0.00% 0.00% 12,100 12,100 -1 -1
docs: /components/progress 0.00% 0.00% 102,000 102,000 -1 -1
docs: /components/radio-buttons 0.00% 0.00% 57,800 57,800 -1 -1
docs: /components/rating 0.00% 0.00% 49,800 49,800 -1 -1
docs: /components/selects 0.00% 0.00% 163,000 163,000 -1 -1
docs: /components/slider 0.00% 0.00% 78,900 78,900 -1 -1
docs: /components/snackbars 0.00% 0.00% 117,000 117,000 -1 -1
docs: /components/speed-dial 0.00% 0.00% 53,500 53,500 -1 -1
docs: /components/steppers 0.00% 0.00% 207,000 207,000 -1 -1
docs: /components/switches 0.00% 0.00% 72,800 72,800 -1 -1
docs: /components/tables 0.00% 0.00% 731,000 731,000 -1 -1
docs: /components/tabs 0.00% 0.00% 166,000 166,000 -1 -1
docs: /components/text-fields 0.00% 0.00% 298,000 298,000 -1 -1
docs: /components/textarea-autosize 0.00% 0.00% 9,750 9,750 -1 -1
docs: /components/toggle-button 0.00% 0.00% 21,800 21,800 -1 -1
docs: /components/tooltips 0.00% 0.00% 94,500 94,500 -1 -1
docs: /components/transfer-list 0.00% 0.00% 47,800 47,800 -1 -1
docs: /components/transitions 0.00% 0.00% 58,000 58,000 -1 -1
docs: /components/typography 0.00% 0.00% 38,800 38,800 -1 -1
docs: /components/use-media-query 0.00% 0.00% 60,600 60,600 -1 -1
docs: /customization/breakpoints 0.00% 0.00% 80,500 80,500 -1 -1
docs: /customization/color 0.00% 0.00% 97,700 97,700 -1 -1
docs: /customization/components 0.00% 0.00% 164,000 164,000 -1 -1
docs: /customization/default-theme 0.00% 0.00% 75,700 75,700 -1 -1
docs: /customization/density 0.00% 0.00% 39,300 39,300 -1 -1
docs: /customization/globals 0.00% 0.00% 19,800 19,800 -1 -1
docs: /customization/palette 0.00% 0.00% 57,500 57,500 -1 -1
docs: /customization/spacing 0.00% 0.00% 12,600 12,600 -1 -1
docs: /customization/themes 0.00% 0.00% 61,400 61,400 -1 -1
docs: /customization/typography 0.00% 0.00% 431,000 431,000 -1 -1
docs: /customization/z-index 0.00% 0.00% 9,730 9,730 -1 -1
docs: /discover-more/backers 0.00% 0.00% 6,780 6,780 -1 -1
docs: /discover-more/changelog 0.00% 0.00% 3,560 3,560 -1 -1
docs: /discover-more/community 0.00% 0.00% 5,440 5,440 -1 -1
docs: /discover-more/governance 0.00% 0.00% 6,800 6,800 -1 -1
docs: /discover-more/languages 0.00% 0.00% 10,100 10,100 -1 -1
docs: /discover-more/related-projects 0.00% 0.00% 18,800 18,800 -1 -1
docs: /discover-more/roadmap 0.00% 0.00% 6,610 6,610 -1 -1
docs: /discover-more/showcase 0.00% 0.00% 70,300 70,300 -1 -1
docs: /discover-more/team 0.00% 0.00% 21,800 21,800 -1 -1
docs: /discover-more/vision 0.00% 0.00% 19,100 19,100 -1 -1
docs: /getting-started/example-projects 0.00% 0.00% 24,000 24,000 -1 -1
docs: /getting-started/faq 0.00% 0.00% 154,000 154,000 -1 -1
docs: /getting-started/installation 0.00% 0.00% 31,600 31,600 -1 -1
docs: /getting-started/learn 0.00% 0.00% 37,300 37,300 -1 -1
docs: /getting-started/page-layout-examples 0.00% 0.00% 28,900 28,900 -1 -1
docs: /getting-started/page-layout-examples/album 0.00% 0.00% 9,850 9,850 -1 -1
docs: /getting-started/page-layout-examples/blog 0.00% 0.00% 31,900 31,900 -1 -1
docs: /getting-started/page-layout-examples/checkout 0.00% 0.00% 46,300 46,300 -1 -1
docs: /getting-started/page-layout-examples/dashboard 0.00% 0.00% 393,000 393,000 -1 -1
docs: /getting-started/page-layout-examples/pricing 0.00% 0.00% 20,300 20,300 -1 -1
docs: /getting-started/page-layout-examples/sign-in 0.00% 0.00% 43,000 43,000 -1 -1
docs: /getting-started/page-layout-examples/sign-in-side 0.00% 0.00% 43,200 43,200 -1 -1
docs: /getting-started/page-layout-examples/sign-up 0.00% 0.00% 43,400 43,400 -1 -1
docs: /getting-started/page-layout-examples/sticky-footer 0.00% 0.00% 2,090 2,090 -1 -1
docs: /getting-started/supported-components 0.00% 0.00% 73,800 73,800 -1 -1
docs: /getting-started/supported-platforms 0.00% 0.00% 23,800 23,800 -1 -1
docs: /getting-started/usage 0.00% 0.00% 32,200 32,200 -1 -1
docs: /guides/api 0.00% 0.00% 62,100 62,100 -1 -1
docs: /guides/composition 0.00% 0.00% 106,000 106,000 -1 -1
docs: /guides/flow 0.00% 0.00% 6,690 6,690 -1 -1
docs: /guides/interoperability 0.00% 0.00% 185,000 185,000 -1 -1
docs: /guides/migration-v0x 0.00% 0.00% 52,300 52,300 -1 -1
docs: /guides/migration-v3 0.00% 0.00% 131,000 131,000 -1 -1
docs: /guides/minimizing-bundle-size 0.00% 0.00% 45,500 45,500 -1 -1
docs: /guides/responsive-ui 0.00% 0.00% 14,400 14,400 -1 -1
docs: /guides/right-to-left 0.00% 0.00% 46,100 46,100 -1 -1
docs: /guides/server-rendering 0.00% 0.00% 58,500 58,500 -1 -1
docs: /guides/testing 0.00% 0.00% 53,900 53,900 -1 -1
docs: /guides/typescript 0.00% 0.00% 80,100 80,100 -1 -1
docs: /performance/table-component 0.00% 0.00% 1,340 1,340 -1 -1
docs: /performance/table-emotion 0.00% 0.00% 25,200 25,200 -1 -1
docs: /performance/table-hook 0.00% 0.00% 1,420 1,420 -1 -1
docs: /performance/table-mui 0.00% 0.00% 6,280 6,280 -1 -1
docs: /performance/table-raw 0.00% 0.00% 1,110 1,110 -1 -1
docs: /performance/table-styled-components 0.00% 0.00% 43,200 43,200 -1 -1
docs: /premium-themes/instapaper 0.00% 0.00% 88,500 88,500 -1 -1
docs: /premium-themes/onepirate 0.00% 0.00% 50,400 50,400 -1 -1
docs: /premium-themes/onepirate/forgot-password 0.00% 0.00% 75,800 75,800 -1 -1
docs: /premium-themes/onepirate/privacy 0.00% 0.00% 69,300 69,300 -1 -1
docs: /premium-themes/onepirate/sign-in 0.00% 0.00% 76,200 76,200 -1 -1
docs: /premium-themes/onepirate/sign-up 0.00% 0.00% 76,400 76,400 -1 -1
docs: /premium-themes/onepirate/terms 0.00% 0.00% 92,100 92,100 -1 -1
docs: /premium-themes/paperbase 0.00% 0.00% 54,000 54,000 -1 -1
docs: /premium-themes/tweeper 0.00% 0.00% 95,900 95,900 -1 -1
docs: /styles/advanced 0.00% 0.00% 235,000 235,000 -1 -1
docs: /styles/api 0.00% 0.00% 126,000 126,000 -1 -1
docs: /styles/basics 0.00% 0.00% 89,300 89,300 -1 -1
docs: /system/api 0.00% 0.00% 77,700 77,700 -1 -1
docs: /system/basics 0.00% 0.00% 187,000 187,000 -1 -1
docs: /system/borders 0.00% 0.00% 37,800 37,800 -1 -1
docs: /system/display 0.00% 0.00% 58,000 58,000 -1 -1
docs: /system/flexbox 0.00% 0.00% 68,400 68,400 -1 -1
docs: /system/palette 0.00% 0.00% 27,600 27,600 -1 -1
docs: /system/positions 0.00% 0.00% 22,000 22,000 -1 -1
docs: /system/shadows 0.00% 0.00% 21,100 21,100 -1 -1
docs: /system/sizing 0.00% 0.00% 29,900 29,900 -1 -1
docs: /system/spacing 0.00% 0.00% 49,700 49,700 -1 -1
docs: /system/typography 0.00% 0.00% 45,100 45,100 -1 -1
docs: /versions 0.00% 0.00% 76,700 76,700 -1 -1

Generated by 🚫 dangerJS against bd240db

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: TextareaAutosize The React component. labels Jul 24, 2019
@oliviertassinari
Copy link
Member

@mcdougal Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: TextareaAutosize The React component.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Invariant Violation Maximum update depth exceeded on TextareaAutosize
3 participants