Custom component in `as` prop of `MenuButton` doesn't work

Description

When I supply a component to the as prop of MenuButton I expect the menu to function normally.

The documentation states:

The default MenuButton can be styled using the usual styled-system props, but it starts off plainly styled.

Using the as prop of the MenuButton, you can render a custom component instead of the default MenuButton. For instance, you can use Chakra’s Button component, or your own custom component.

Custom components must take a ref prop which is assigned to the React component that triggers the menu opening. This is so that the MenuList popover can be positioned correctly. Without this, the MenuList will render in an undefined position.

This doesn’t seem to work with a custom component (even if it is wrapped in forward ref).

Link to Reproduction

https://codesandbox.io/embed/youthful-darkness-r6ih8

Steps to reproduce

1. Create a ref-forwarding custom wrapper around Button:

const CustomButton = forwardRef((props, ref) => {
  return <Button ref={ref}>{props.children}</Button>
})

1. Pass it as the as prop to MenuButton and build a menu like normal. The menu will not appear to open.

Chakra UI Version

1.6.12

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[martinblostein]

I see, makes total sense. From the existing documentation I assumed the ref would be used to attach a onclick listener to the element, but that wouldn’t be idiomatic. Thanks.

Basically, the custom component needs to implement the same prop interface as MenuButton. Duh!

[anubra266]

@martinblostein the full return is here