Only narrow sliver of leaflet map drawn when placed inside allotment

Question

I like allotment, a react split-pane component. In one of my projects it works great. In the other two leaflet maps would have to be placed inside Allotments.

Here an example: https://codesandbox.io/s/affectionate-beaver-8ddjk8?file=/src/App.js

In the example I placed a basic leaflet map inside an Allotment. Unfortunately only a narrow sliver on the left side of the map is drawn:

It seems that the center of the map is drawn, but only as a narrow sliver.

Any ideas why this happens and how it could be solved?

Answer 1

I was able to make it work by invalidating the map size when the change event on the allotment is triggered:

  const ref = useRef();
  return (
    <Allotment
      onChange={() => ref.current && ref.current.invalidateSize(false)}
    >
      <MapContainer
        ref={ref}
        center={center}
        zoom={13}
        defaultSizes={[0, 100]}
        minSize={0}
      >
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <Marker position={center}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
      <div className="other">other</div>
    </Allotment>
  );

See sandbox.