aforemny / elm-mdc

Elm port of the Material Components for the Web CSS/JS library
https://aforemny.github.io/elm-mdc
Apache License 2.0
354 stars 43 forks source link

Ripples: not implemented #175

Open berenddeboer opened 5 years ago

berenddeboer commented 5 years ago

We have the following issues with ripples:

aforemny commented 5 years ago

I was just looking into this, but then I noticed that the MDC demo suffers from the same problem, so maybe it is by design? MDC's List demo, see List with Trailing Checkbox.

As a work-around one could wrap the the radio button in a div that stops event propagation on mousedown, pointerdown and touchstart events.

I have also experimented with a potential solution to this here: 9fa1d1989fc845e4c4ddf24aa76a7f220b45dd01. Assuming that the node that ripples (think list item) has an id, we can traverse from the event target (think radio button's <input>) to the list item, and see if there are any nodes that have the mdc-ripple-upgraded class. In that case, the list item does not ripple.

But now I am wondering if we should include this?

berenddeboer commented 4 years ago

Does the MDC demo have the same thing? For checkboxes we do exactly the same, so that looks good, but for radio you'll notice they only ripple the radio button.