elm-mdc icon indicating copy to clipboard operation
elm-mdc copied to clipboard

Ripples: not implemented

Open berenddeboer opened this issue 5 years ago • 2 comments

We have the following issues with ripples:

  • [ ] MDC does ripples on the next animation frame, checking if the current component is active, in order to prevent ancestor ripples. We don't do that, so we get double ripples for example in a list with a radio button. Perhaps the workaround of not rippling the li element in case we know we are rendering a radio group might be better.

berenddeboer avatar Apr 15 '19 22:04 berenddeboer

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?

aforemny avatar Jun 16 '19 13:06 aforemny

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.

berenddeboer avatar Sep 18 '19 22:09 berenddeboer