Disabled html attribute is not set on Button if passed in as prop to MenuItem

[Mikunj]

Description

If you pass in a Button as an as prop to MenuItem and disable it, it will not render with the disabled html attribute. Everything else works as expected: Button cannot be clicked, menu item cannot be focused

This issue is not present in @chakra-ui/button: "2.0.15"

Examples

<!-- button won't have disabled attribute -->
<MenuItem as={Button} isDisabled>My Disabled Item</MenuItem>

<!-- button has disabled attribute -->
<Button isDisabled>My Disabled Button</Button>

Link to Reproduction

https://codesandbox.io/s/modest-hoover-yfrdt6?file=/src/index.js

Steps to reproduce

No response

Chakra UI Version

2.7.1

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[onurhan1337]

As far as I have tested, MenuItem cannot get the disabled property after giving as={Button} property as you mentioned. In fact, when we give the isDisabled property, onClick does not work, but both the disabled property and disabled button styling do not work. I'm having the same problem.

[Mikunj]

I have investigated this further and found that useMenuItem hook returns disabled as the prop (Code reference) which is then ignored by Button component (Code reference)

[Philzen]

@Mikunj #8462 has been merged, disabled prop on button works again, you can test that out in the LiveCoding-view here: https://chakra-ui-website-ptekgabqh-chakra-ui.vercel.app/docs/components/button/usage

If satisfied, you may close this issue, the fix should be shipping with Chakra 2.8.3.

[Mikunj]

Awesome 🎉, seems to work as intended now 😃