[Bug]: Error when render <Menu.Button> as a custom component

[adamlindqvist]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.4.1

What browser are you using?

Chrome

Reproduction repository

https://codesandbox.io/s/wonderful-leaf-t4899?file=/src/App.js

Describe your issue

When trying to use <Menu.Button /> with a custom component it doesn't work as expected and I get the following warning:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Simplified example:

const CustomButton = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

<Menu.Button as={CustomButton}>More</Menu.Button>

Does headless-ui require the <CustomButton/>-component to forward unknown props down to the html <button> element am I using it wrong?

[adamlindqvist]

I close this as I realize that it needs to forward the ref to the underlying button component.

[StErMi]

could you explain your solution because I've the same problem

[adamlindqvist]

could you explain your solution because I've the same problem

You'll have to do like this example in the react doc: https://reactjs.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components

[ctsstc]

CustomButton Example

Before

const CustomButton = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

After

const CustomButton = React.forwardRef(({ children, onClick }, ref) => (
  <button ref={ref} onClick={onClick}>
    {children}
  </button>
));

Tab Example

Throwing this example of using a Tab here with a HOC since this was driving me crazy /phew.

basic-tab.tsx

import { classNames } from 'core/utils';
import React from 'react';

type Props = {
  selected: boolean;
  onClick?: () => void;
  children: React.ReactNode;
};

const BasicTabComponent = ({ selected, onClick = () => {}, children }: Props, ref) => {
  return (
    <button
      ref={ref}
      className={classNames(
        selected ? 'text-accent-2-teal-600 border-b-2 border-b-accent-2-teal-600' : 'text-gray-500',
        'text-sm leading-5 font-medium pb-4 px-1',
      )}
      onClick={onClick}
      type="button"
    >
      {children}
    </button>
  );
};

const BasicTab = React.forwardRef(BasicTabComponent);

export default BasicTab;

headless-ui-tab.tsx

import React, { Fragment } from 'react';
import BasicTab from '@/components/tab/basic-tab';
import { Tab } from '@headlessui/react';

type Props = {
  children: React.ReactNode;
};

const HeadlessUiTab = ({ children }: Props) => {
  return <Tab as={Fragment}>{({ selected }) => <BasicTab selected={selected}>{children}</BasicTab>}</Tab>;
};

export default HeadlessUiTab;

Implementation

<Tab.Group>
  <Tab.List>
    <HeadlessUiTab>Tab 1</HeadlessUiTab>
    <HeadlessUiTab>Tab 2</HeadlessUiTab>
  </Tab.List>

  <Tab.Panels>
    <Tab.Panel>Tab 1 Content</Tab.Panel>
    <Tab.Panel>Tab 2 Content</Tab.Panel>
  </Tab.Panels>
</Tab.Group>

[RobinMalfait]

When you are adding custom components, make sure to passthrough all the props you get from Headless UI. These include event handlers, but also aria related attributes.

E.g.:

// This is incorrect
const CustomButton = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

<Menu.Button as={CustomButton}>More</Menu.Button>

// This is correct
const CustomButton = React.forwardRef((props, ref) => (
  <button ref={ref} {...props} />
));

<Menu.Button as={CustomButton}>More</Menu.Button>

[adamlindqvist]

When you are adding custom components, make sure to passthrough all the props you get from Headless UI. These include event handlers, but also aria related attributes.

E.g.:

// This is incorrect
const CustomButton = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

<Menu.Button as={CustomButton}>More</Menu.Button>

// This is correct
const CustomButton = React.forwardRef((props, ref) => (
  <button ref={ref} {...props} />
));

<Menu.Button as={CustomButton}>More</Menu.Button>

It might be worth mentioning this in the documentation?

[wottpal]

It might be worth mentioning this in the documentation?

yes, please. solved my exact issue. thanks, @adamlindqvist!