is it possible to manually trigger ripple on a button from the containing component?

[bytesandwich]

If I have:

handleSomeOtherWayToInteract() {
 // make the buttons ripple like they've been clicked, without actually clicking them?
}
render() {
  return (
    <div>
      <RaisedButton onClick={this.doSomethingSerious} />
    </div>
  );
}

is there a quick way to make the ripple effect occur from the commented line without incurring onClick?

[conundrumer]

We used to be able to do this by reaching into the EnhancedButton ref into the TouchRipple ref and then calling TouchRipple.start() and TouchRipple.end(), but the TouchRipple ref was removed after you made this issue.

Right now, I created my own version of EnhancedButton to readd this ref, but I think we should request this as a feature, something like a EnhancedButton.triggerRipple() method.

[conundrumer]

I added it back in and made a few changes to make it compatible with all the buttons. Let me know what you think, and if you can come up with a better/cleaner way.

Usage:

var Component = React.createClass({

  doRipple() {
    if (this.refs.iconButton && this.refs.iconButton.refs.button) {
      this.refs.iconButton.refs.button.start();
      setTimeout(() => {
        if (this.refs.iconButton && this.refs.iconButton.refs.button) {
          this.refs.iconButton.refs.button.end();
        }
      }, 1000); // hold for one second
    }
  }

  render() {
    return <IconButton ref="iconButton" />;
  }

});

The refs.xxx.yyy() pattern might be deprecated and it looks hackish so I'm hesitant on making a pull request.

[shaurya947]

@jackphel I wonder if you could use the React TestUtils to simulate a button click.. https://facebook.github.io/react/docs/test-utils.html#simulate

Closing for now as this has been sitting for too long and @conundrumer suggested some sort of a workaround. Feel free to comment if you would like to discuss more!

[efroim102]

Is there a way to apply the TouchRipple effect/component to a custom element/component? (I know the TouchRipple component is available in the internal directory)
Maybe I should try to use EnhancedButton instead?