Select menu options clickable area

[bhamtil-twilio]

Hello! My team has received customer feedback that the options in a select menu (accessed from a kebab menu button) are only clickable on the text itself while the customer was expecting to be able to click the whole row. This is a minor issue but a nuisance for them nonetheless. Is this how the select component is meant to behave, or can it be configured?

[gloriliale]

Hi @bhamtil-twilio!
That is unexpected; could you provide a link to a coded example of the option only having text clickable? The options in a menu are designed for users to be able to click the whole row, as you stated.

I tried to reproduce it in this code sandbox, but it shows the whole row as being clickable (peek the console). Getting a snippet of the code would help figure out what's going awry. Many thanks!

[Aobasi4]

Hey, The issue maybe the connected anchor inside the menuitem but i'm not sure, here is the snippet

{errorCode ? (
<>
<MenuButton
{...menu}
variant="reset"
size="reset"
data-testid="create-alarm-menu-button"
>


<Menu {...menu} aria-label={labels.createAlarm}>
<MenuItem {...menu}>
<ConnectedAnchor
href={routeFor("createAlarm") + ?errorCode=${errorCode}}
data-testid="create-alarm-for-error-code"
>
{labels.createAlarm}


{renderInspectOption({})}

</>
) : null}

[nkrantz]

Hey @Aobasi4 - if you could, please share a CodeSandbox of the reproduction so that we can see the bug you're noticing. Feel free to use this Paste starter template. Thanks!

[nkrantz]

Hi @bhamtil-twilio @Aobasi4 - are you still having trouble with Select? We don't support anchors inside of menuItems, so that's likely causing some issues, but please feel free to update this thread if you have more questions about it.

[shleewhite]

Marking this as answered due to inactivity. If you have follow up questions please let us know!