How can I use material-ripple to create a button-like component?

Issue

I want to create a button-like component with ripple animation and it looks like this:

<div>Button</div> 
<material-ripple></material-ripple>

In the past, this works fine because when I click on this custom element, I actually clicks on material-ripple and the click event bubbles to the host element.

As of angular_components 0.5.1, material-ripple shows a centered ripple on keypress. This is different from clicking because the event target is the host element itself and not the ripple component.

Is there a way that I can pass a keypress event down to the material-ripple, so that the ripple animation would be played? Or is there a way to play the animation programmatically?

Solution

After some research, I’ve come up with a solution using dart:html.

@ViewChild(MaterialRippleComponent, read: ElementRef)
ElementRef materialRipple;

@HostListener('keydown', const [r'$event'])
void passKeyDown(KeyboardEvent event) {
  (materialRipple.nativeElement as HtmlElement).dispatchEvent(
      new KeyEvent('keydown', keyCode: event.keyCode, canBubble: false)
          .wrapped);
}

Although this does not work in Dartium due to some bugs around KeyEvent and KeyboardEvent, it works fine in Chrome.

Answered By – Feu

Answer Checked By – Clifford M. (FlutterFixes Volunteer)