Tooltip on disabled buttons not working

Description

When there is a tooltip wrapping a disabled button, the tooltip is disabled as well. If you separate the tooltip from the button by adding a Box or using shouldWrapChildren, the tooltip works again. However, if the button is part of a button group, this causes it to disconnect from the group and lose the proper border radius.

Link to Reproduction

https://codesandbox.io/s/zealous-wind-lysbr

Steps to reproduce

There are four buttons/button groups set up, demonstrating the different cases I have come across.

The first demonstrates a tooltip on a disabled button, which does not work. The second demonstrates a tooltip on a disabled button with shouldWrapChildren, which works. The third is a group showing a tooltip on an enabled button working, and a disabled button not working. The fourth is a group showing a disabled button with a shouldWrapChildren tooltip, demonstrating the border radius issue.

Chakra UI Version

1.8.1

Browser

Firefox 96.0.3

Operating System

• macOS
• Windows
• Linux

Additional Information

My current workaround is to manually set the border radius back to 0 on the appropriate sides of the first 3 buttons where the issue is occurring.

[TimKolberger]

Duplicate of #2849 @nikolovlazar is this a candidate for the FAQ?

[chrysb]

They don’t seem interested in fixing this one for some reason. I would just manually set the border radius if it is not too much work for your use-case, personally.

Thanks for the reply! It also changes the size of the button. I only wrapped the middle one here, if I wrapped all 3 it would be a mess. I ended up just overriding isDisabled and disabling the buttons manually instead of using isDisabled — I think that’s a more extensible approach