Paths ignore className changes

[jahed]

Expected behavior

When changing the className prop of any Path elements (Polygon, Circle, etc.), the respective DOM element should update to reflect the change.

Actual behavior

On initial mount, Paths pickup the className. However if it's changed, the element's class isn't updated.

This is due to this issue which seems to be in limbo on Leaflet. Some seem to think it's not an issue, despite the setStyle method saying it updates all the Path options (which className is):
Leaflet/Leaflet#2662

So I would suggest implementing our own className update if nothing else is available.

Steps to reproduce

Here's a simple example where clicking the circle makes it red (using CSS):

https://www.webpackbin.com/bins/-KthIFTWFI0_pJjAR70x

[jahed]

I understand the previous response on this ticket:

#94

However, className is a very standard prop in React, so not supporting the same behaviour in React and going the route Leaflet has taken, IMO is extremely confusing and frustrating when debugging this library among other standard React components.

If the plan really is to not implement this, I suggest leaving a warning somewhere obvious in the documentation. Possibly under the Vector Layers section.

[jahed]

For anyone who's looking for a quick fix, just extend the individual components as needed. It may be flaky in certain circumstances, but so far it's worked fine for me:

import { Polygon as LeafletPolygon } from 'react-leaflet'
import { difference } from 'lodash'

export default class Polygon extends LeafletPolygon {
    updateLeafletElement(fromProps, toProps) {
        super.updateLeafletElement(fromProps, toProps)

        if (toProps.className !== fromProps.className) {
            const fromClasses = fromProps.className.split(' ')
            const toClasses = toProps.className.split(' ')
            this.leafletElement._path.classList.remove(...difference(fromClasses, toClasses))
            this.leafletElement._path.classList.add(...difference(toClasses, fromClasses))
        }
    }
}

[AdrianGolda]

I don't know why this issue is closed I spent 3 hours trying to find a solution for this bug and I didn't. And to me this looks like a serious bug.

[jahed]

I closed it myself as there was no response and I no longer use react-leaflet so I won't know if it's still an issue. I wrote my own wrapper instead. It's really straightforward, especially now with React Hooks.

I suggest you make your own issue with up-to-date diagnostics since this is pretty old now.