search

developit / preact-mdl

:boom: A collection of Preact Components that encapsulate Google's Material Design Lite.
MIT License
187 stars 20 forks source link

Class incompatibility with preact-compat #27

Closed IrregularShed closed 7 years ago

IrregularShed commented 7 years ago

I've been scratching my head about this for the best part of a day, but have found the origin - I'm not sure whether the issue belongs to preact-compat or preact-mdl though.

If you are using preact-compat and assign a custom class/className to a component, all the MDL classes are removed. Singlestepping through the code I found that the class I assigned was added to both class and className attributes in the VNode (while all the MDL classes were just in the class attribute) and when the component was finally rendered only the classes listed in className actually made it onto the DOM nodes.

The workaround is to not use preact-compat, so that there's no conflict between the class and className attributes. Obviously not ideal in all cases, although the amount of changes required aren't massive and chances are if you're using preact-mdl you've bought into the ecosystem enough to start removing the compatibility layer.

developit commented 7 years ago

@IrregularShed good catch - are you specifying the custom class via className in your JSX? We might be able to change how preact-mdl looks for class, it's probably not accounting for className being there. A long time ago, Preact used to normalize className to class for Components, but this proved troublesome so it no longer does. Likely preact-mdl predates that change and needs to do a little extra work to check both properties itself.

developit commented 7 years ago

Fix released as preact-mdl@2.1.0!

IrregularShed commented 7 years ago

Excellent work sir!