decaporg / decap-cms

A Git-based CMS for Static Site Generators
https://decapcms.org
MIT License
17.96k stars 3.05k forks source link

fix(map-widget): ensure map renders correctly when expanding initially collapsed sections (#6541) #7229

Closed afieif closed 4 months ago

afieif commented 5 months ago

Fixes #6541

Summary

This pull request addresses the issue where the Map Widget does not display correctly when part of an initially collapsed object, only rendering upon window resize or opening dev tools. The problem was caused by the map not updating its size when the container element became visible.

The fix involves adding a ResizeObserver to the map container to trigger the map size update whenever the container is resized, ensuring the map renders correctly when the section is expanded.

Test plan

  1. Create a map widget inside a collapsible section.
  2. Initially, keep the section collapsed.
  3. Expand the section and observe the map rendering correctly without the need for a window resize or opening dev tools.

Add the following field to the config for testing

- label: "Location"
        name: "location"
        widget: "object"
        collapsed: true
        fields:
          - { label: "LatLong", name: "latlong", widget: "map" }

Video Demonstration

https://github.com/decaporg/decap-cms/assets/60255809/9bfeec79-0abd-44c1-ad03-862e2167652b

https://github.com/decaporg/decap-cms/assets/60255809/a17021e6-f348-4469-b665-d897d153339f

Checklist