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!