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

Change navigation type from mini to regular (or opposite) on resize causes rerender when the appbar is not fixed #1207

Closed
Nureckiy opened this issue Jul 25, 2021 · 1 comment
Milestone

Comments

@Nureckiy
Copy link

When mini and non-mini layout types are used for different screen sizes and the position of the app bar is not fixed, screen resizing that causes the layout type to change will also unnecessarily re-render the component.

To Reproduce Steps to reproduce the behavior:

  1. Set different types of layouts (in my example, temporary-mini and full-height)
  2. Set fixed: false for appBarProps;
  3. Try resizing the screen to change the layout type
  4. See how the component is redrawn

Here is a sandbox describing the behavior (try clicking the "Click me" button to change the state of the component, then resize, the state will be reset): https://codesandbox.io/s/nervous-snowflake-spcbl

Screenshots
Before resize (test value is "TRUE"):
image

After resizing (state reset):
image

Package version is 2.9.0

Thanks!

@Nureckiy Nureckiy added the bug label Jul 25, 2021
@mlaursen mlaursen added this to the v2.9.1 milestone Jul 27, 2021
mlaursen added a commit that referenced this issue Jul 27, 2021
@mlaursen
Copy link
Owner

mlaursen commented Jul 27, 2021

This bug is caused by switching from rendering the content as a fragment to rendering in a div for grid styles which causes the children to re-mount (losing state). I'll go with updating the MiniLayoutWrapper to always render the <div> if any of the layout types are mini which will prevent the children from re-mounting to fix this issue.

This has a small side effect of always rendering a <div> around the <main> content which might cause a stlying issue for the non-mini layouts in your app. If you do run into a stlying issue, additional props/styles can be provided to this wrapper <div> with the miniWrapperProps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants