Tab with custom as component does not allow keyboard switching?

[vincerubinetti]

I have a Tabs component wrapping HUI's, and it looks like this:

import { ReactNode } from "react";
import { Tab } from "@headlessui/react";
import Button from "@/components/Button";

type Props = {
  tabs: {
    name: string;
    content: ReactNode;
  }[];
};

const Tabs = ({ tabs }: Props) => (
  <Tab.Group>
    <Tab.List>
      {tabs.map((tab, index) => (
        <Tab key={index} as={Button}>
          {tab.name}
        </Tab>
      ))}
    </Tab.List>
    <Tab.Panels>
      {tabs.map((tab, index) => (
        <Tab.Panel key={index}>
          {tab.content}
        </Tab.Panel>
      ))}
    </Tab.Panels>
  </Tab.Group>
);

export default Tabs;

I'm using my own custom <Button> component for the tab button for visual consistency, and not having to duplicate styles. But when I do this, focusing a button and pressing the arrow keys does nothing. Here's the button component:

import {
  AnchorHTMLAttributes,
  ButtonHTMLAttributes,
  FunctionComponent,
  ReactNode,
} from "react";

type Anchor = AnchorHTMLAttributes<HTMLAnchorElement>;
type Button = ButtonHTMLAttributes<HTMLButtonElement>;
type AnchorOrButton = Anchor | Button;

type Props = {
  children: ReactNode;
} & AnchorOrButton;

const isAnchor = (props: AnchorOrButton): props is Anchor => "href" in props;
const isButton = (props: AnchorOrButton): props is Button => "onClick" in props;

const Button = ({ children, ...props }: Props) => {
  console.log(props);
  if (isAnchor(props))
    return (
      <a
        target="_blank"
        {...props}
      >
        {children}
      </a>
    );
  if (isButton(props))
    return (
      <button {...props}>
        {children}
      </button>
    );
  return <></>;
};

export default Button;

I would assume HUI is passing down the appropriate keyboard listeners and such. In fact, console logging the props the button components receives, it seems to get everything it would theoretically need...

Am I doing something wrong, is this a bug?

[vincerubinetti]

Nevermind, I didn't realize I needed for forwardRef on the button component. Makes sense.

Would be good to add a note about this in the docs for anything that has an as prop. I also didn't get any console error or anything.