[material-ui][ButtonBase] Allow disabling the ripple when right-clicked (or other buttons)

[NotYoojun]

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

[mj12albert]

I think it would even make sense to change this to be the default instead of making it configurable, I can't think of a real use-case when I'd want the <Button/> to ripple when clicking any button that's not the left/main button 😬

[NotYoojun]

@mj12albert I think it's really significant to make it configurable. There are some cases, for example, left-click a button to do a primary action while right-click it to do another action or open a menu of other actions. In some other cases, it's not a Button, it's a list item based on ButtonBase, which will use left-click to select the item, right-click to open a operation menu.

In some industry-inside software like dashboards, the other buttons (like the middle, fourth and fifth) will be used to trigger different actions. I know this is not a really good idea, but it's kinda like industry consensus.

These are not that common thought, but I think it's really necessary to allow developers to make their own choices. It's a good idea to set the default choice to 'only left click raises ripples', but it needs to be configurable.

[DiegoAndai]

Hey @NotYoojun, thanks for the feature request!

I added the waiting for 👍🏼 label so the community can vote for this new feature. If you want to see this implemented, please add a 👍🏼 reaction to the issue's description.

@aarongarciah, what do you think about this? On the one hand, it seems helpful. On the other, it increases the API surface, and there might be better alternatives that don't require adding a new prop, such as improving composition and/or exposing/documenting the ripple utilities.