Summary

In most cases, a Button doesn't really do something when it's clicked with middle or right buttons. However currently the ripple will still show when clicking a button with any button. I don't think this is really a good idea, since it will mislead the user.

My idea is to add a property similar to 'disableTouchRipple' to all components that have a ripple, but it allows the developer to control which mouse button will let the ripple will be displayed. For example,

// More about mouse button is here: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button#value
<Button showTouchRippleOnButton={[0, 3, 4]} {...other}/>

And the default value of this property should be [0], which means only the main button (usually the left button) will trigger ripples. This property enables the developer to control it, cause sometimes one may listen to, for example, right-click events. In this scenario, this gives the full-control to adapt different using cases.

Examples

You can also define an enum for MouseButtons, or a string-union. In our projects we use an enum to represent mouse buttons like this, and you guys can use it as long as you like:

/**
 * The mouse buttons. This is a subset of the `MouseEvent.button` values.
 * 
 * @remarks buttons may be configured differently to the standard "left to right" layout. 
 * A mouse configured for left-handed use may have the button actions reversed. 
 * Some pointing devices only have one button and use keyboard or other input mechanisms to indicate main, 
 * secondary, auxiliary, etc. Others may have many buttons mapped to different functions and button values.
 * 
 * @link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button#value
 */
export enum MouseButton
{
    /** Main button, usually the left button or the un-initialized state */
    Main = 0,

    /** Auxiliary button, usually the wheel button or the middle button (if present) */
    Auxiliary = 1,

    /** Secondary button, usually the right button */
    Secondary = 2,

    /** Fourth button, typically the Browser Back button */
    Fourth = 3,

    /** Fifth button, typically the Browser Forward button */
    Fifth = 4
}

Motivation

This idea is really important for our projects. If this can be added, we'll be so happy and appreciated.
And when we have some income, we'll considering buying you guys a cup of coffee by donating.

Thanks for your work!

Search keywords: ripple, right, button, buttonbase, mouse, click