[Chip] Control clickable property

[vilvaathibanpb]

Closes #13052

[vilvaathibanpb]

@oliviertassinari @mbrookes Can you please review my PR?

[eps1lon]

The visual state will now indicate that the chip is not clickable but clicking the chip will still trigger the attached handlers. This might be confusing for users.

What is the use-case for this?

You could already solve this by using:

const { clickable, onClick } = props;
<Chip clickable={clickable} onClick={clickable && onClick} />

If anything I think we should warn if users set clickable to false and onClick to a function.

[vilvaathibanpb]

@eps1lon . The use case - We had a request as follows:

"This would be much better if having clickable={false} OnClick={() => { do something}}. I would like that to disable the click. As of right now, if you have an onclick, clickable does absolutely nothing. The feature that would be much better if styling and making the onclick not function not work. As clickable false, seems like the "chip" should be disabled"

PR Link

[oliviertassinari]

If anything I think we should warn if users set clickable to false and onClick to a function.

People always want to do crazy stuff. Very often, we are allowing them. @zachrickards would you mind sharing your use case? The issue with the warning is that people can no longer easily have an onClick event listener without the clickable state. Adding a warning is definitely a viable option.

updated

[oliviertassinari]

@vilvaathibanpb Thank you

[vilvaathibanpb]

@oliviertassinari Always welcome 👍