ActionMenu.Anchor doesn't accept `id` param and doesn't pass up child id either

[milemons]

Description

I noticed that when you use ActionMenu.Anchor for an ActionMenu, there is no way to specify an Id for the button because it checks the anchor/button itself (not the children) for an id but the Anchor type doesn't include an id, unlike the Button type

Steps to reproduce

Example code:
https://github.com/github/github/blob/080953f77c52d03e8c896ec94a9f8592d0a48878/ui/packages/copilot-code-chat/CopilotChatButton.tsx#L67C11-L78C31

 <ActionMenu.Anchor>
 <IconButtonWithTooltip
 id="ICON_ID"
 icon={TriangleDownIcon}
 label="Copilot menu"
 hideTooltip={open}
 onSelect={() => setOpen(true)}
 size="small"
 sx={{...squareHeightSx, '>span': {mb: 0}, color: 'fg.muted'}}
 tooltipDirection="sw"
 data-testid="more-copilot-button"
 />
 </ActionMenu.Anchor>

The button will have a random ID assigned and the Anchor will not accept an ID itself.

Version

current

Browser

Chrome, Safari, Firefox, Edge, iOS Safari

[broccolinisoup]

Hi @milemons 👋 Thanks for raising this issue. I recognised that the functionality is available (introduced in #3897) however not typed properly. I pushed a fix for it #4385

Also, to add, as same as ActionMenu.Button, the id needs to be passed in the parent component instead of the child.

<ActionMenu.Anchor id="ICON_ID"> // 👈 custom id passed on the parent
 <IconButtonWithTooltip
 icon={TriangleDownIcon}
 label="Copilot menu"
 hideTooltip={open}
 onSelect={() => setOpen(true)}
 size="small"
 sx={{...squareHeightSx, '>span': {mb: 0}, color: 'fg.muted'}}
 tooltipDirection="sw"
 data-testid="more-copilot-button"
 />
</ActionMenu.Anchor>

Let us know if you have any further issues with it!