Skip to content

Style attributes not updating with stateΒ #1167

@ngarnsworthy

Description

@ngarnsworthy

Hi! πŸ‘‹

Firstly, thanks for your work on this project! πŸ™‚

Today I used patch-package to patch react-leaflet@5.0.0 for the project I'm working on.

I found that when I was updating the color prop for Polygons and Polylines the component did not update the underlying Leaflet object. I found the update function was only checking for changes to the positions. I made a quick fix to this but a implementation would have to fix the object comparison not working properly.

Here is the diff that solved my problem:

diff --git a/node_modules/react-leaflet/lib/Polygon.js b/node_modules/react-leaflet/lib/Polygon.js
index 70ed540..7fe999d 100644
--- a/node_modules/react-leaflet/lib/Polygon.js
+++ b/node_modules/react-leaflet/lib/Polygon.js
@@ -6,7 +6,12 @@ export const Polygon = createPathComponent(function createPolygon({ positions, .
         overlayContainer: polygon
     }));
 }, function updatePolygon(layer, props, prevProps) {
-    if (props.positions !== prevProps.positions) {
-        layer.setLatLngs(props.positions);
+    const {positions, ...options} = props;
+    const {positions: oldPositions, ...oldOptions} = prevProps;
+    if (positions !== oldPositions) {
+        layer.setLatLngs(positions);
+    }
+    if (options !== oldOptions) {
+        layer.setStyle(options);
     }
 });
diff --git a/node_modules/react-leaflet/lib/Polyline.js b/node_modules/react-leaflet/lib/Polyline.js
index d693144..ea8dd06 100644
--- a/node_modules/react-leaflet/lib/Polyline.js
+++ b/node_modules/react-leaflet/lib/Polyline.js
@@ -6,7 +6,12 @@ export const Polyline = createPathComponent(function createPolyline({ positions,
         overlayContainer: polyline
     }));
 }, function updatePolyline(layer, props, prevProps) {
-    if (props.positions !== prevProps.positions) {
-        layer.setLatLngs(props.positions);
+    const {positions, ...options} = props;
+    const {positions: oldPositions, ...oldOptions} = prevProps;
+    if (positions !== oldPositions) {
+        layer.setLatLngs(positions);
+    }
+    if (options !== oldOptions) {
+        layer.setStyle(options);
     }
 });

This issue body was partially generated by patch-package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions