developit / preact-mdl

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

Strange <List> Behavior when using preact-router #40

Open brenapp opened 7 years ago

brenapp commented 7 years ago

Replication Instructions:

  1. You can see this issue in a staging version of my app. Go here, and click the first item on this list, when it appears.
  2. Go back using your browser back button
  3. Attempt to click on the navigation icon again
  4. It disappears and will only reappear when you hover over it

Some other strange behaviors include: entire list items becoming invisible after repeated back and forth navigation and List Primary Content disappearing.

Notice that I am using the word disappearing. This is because all the elements are still present in the DOM, as you can see from the inspector. But they are invisible. I've ruled this down to a compatibility issue between this module and the MDL CSS, as the issue is not present when the CSS is removed

Sidenote: This may be more relevant on the preact-router repo, ask me if you want to move it

developit commented 7 years ago

@MayorMonty probably best here - what version of Preact are you using? In 7.x and prior, element recycling could trigger issues like you were seeing where the styles for a given element get reused somewhere else in the DOM if they were unknown to Preact. 8.1.0 (now the official release) fixes this by completely removing recycling, and should work much better with preact-mdl.

brenapp commented 7 years ago

I am using Preact 7.1, I'll update when I get home, see if that changes anything On Mon, Apr 17, 2017 at 10:05 AM Jason Miller notifications@github.com wrote:

@MayorMonty https://github.com/MayorMonty probably best here - what version of Preact are you using? In 7.x and prior, element recycling could trigger issues like you were seeing where the styles for a given element get reused somewhere else in the DOM if they were unknown to Preact. 8.1.0 (now the official release) fixes this by completely removing recycling, and should work much better with preact-mdl.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/developit/preact-mdl/issues/40#issuecomment-294491683, or mute the thread https://github.com/notifications/unsubscribe-auth/AIbi9nFO7ZW9eFDUC8-KpSwjy0eHaHC4ks5rw3G1gaJpZM4M60Ic .