elm-mdc
elm-mdc copied to clipboard
Ripples: not implemented
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.
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?
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.