Add onDisabledClick handler

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

When some UI elements are disabled, users may struggle to figure out why. Examples include a submit form button that cannot be pressed, a menu item that’s greyed out etc. As a user, I still sometime press on these elements even though they are pale, but only rarely get any useful feedback.

In the best case scenario, clicking a greyed-out Submit button in a form scrolls me to a field that I have made a mistake in and switches the cursor to the right input element. For a disabled menu item, a well-made UI would show me a notification message or give some hint about the current situation somehow else.

It’d be great if ant design had something like onDisabledClick prop in various components. In my opinion, this can significantly improve the UX in cases when it’s critical to guide users towards the system goal. Because onDisabledClick will have an arbitrary logic, it can be accompanied with another a11y prop for screen reader users. I’m not sure about the name of that prop, but it can just contain a string message that would work as a hint.

What does the proposed API look like?

<Button disabled={trueOrFalse} onClick={executeAction} onDisabledClick={() => message.info('You cannot do this action at the moment because of XYZ');} />

<Menu onClick={handleMenuItemClick} onDisabledClick={({ key }) => notification.open({ message: `You cannot use ${key} because ${reasons[key]}`});}>
  <Menu.Item key="action1">Action 1</Menu.Item>
  <Menu.Item key="action2" disabled={true}>Action 2</Menu.Item>
</Menu>

[ztplz]

You can use div wrap the disabled button, see this demo. This will allow you to prompt the user and count user clicks.

[kachkaev]

Thanks for the suggestion! I’ll give it a try and report back if the result is successful.