0

I'm creating a React Js app using MUI as the core component and React Leaflet as the map container.

There is some extra blank space (a UX issue) with the React Leaflet map after when the MUI Drawer is collapsed.

Here is the initial condition (the MUI Drawer component is expanded) enter image description here

Here is the screenshot after clicking the collapse button for the MUI Drawer component from the MUI AppBar component (the extra blank space appears on the right of the screen) enter image description here

Why does this happen and what is the solution for this issue?

Here is the code and the playground: https://codesandbox.io/s/stackoverflow-leaflet-map-with-mui-drawer-9c6ner

Note:

  1. I have to use react-leaflet v3 and react v17 dependencies because in my real project, I have to use react-leaflet-markercluster v3 dependency which is not supported yet with react-leaflet v4 and react v18
  2. If this issue isn't reproducible in your browser, please try to enlarge your codesandbox browser and then try again.
Jabal Logian
  • 1,666
  • 4
  • 24
  • 46
  • The issue is not reproducible in this demo – kboul May 30 '22 at 07:05
  • hello @kboul it also happened to me first. but after I tried to enlarge the codesandbox browser, this issue was reproducible. Or you could try to downgrade the `react` and `react-leaflet` dependencies as I mentioned above. – Jabal Logian May 30 '22 at 08:24
  • Why don't you downgrade them directly in the sandbox so other users can see immediately the issue? Time is precious – kboul May 30 '22 at 13:06
  • @kboul you're right. okay I will do it soon. sorry for the inconvenience. – Jabal Logian May 31 '22 at 01:06
  • Smells like common invalidateSize case. See https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map – ghybs Jun 02 '22 at 02:43

0 Answers0