onItemSelect not working with enter key

[viveleroi]

I'm implementing a Select component and am trying to get keyboard navigation working properly. I have two questions for archival purposes I'll ask them in different discussions.

I've realized that I was missing onActiveItemChange to handle "focus"-like changes in the select menu. Keyboard navigation with the arrow keys, for example.

However I noticed that the onItemSelect event only fires when clicking a select option with my mouse, but does not fire when using the enter key. Since the arrow key navigation seemed to work I figured that would too, but since it doesn't I'm wondering if my custom list renderer is to blame. I've looked for any other kinds of events I'm not handling.

v5.0.20

const renderOption: ItemRenderer<SelectInputOption> = (option, { handleClick, handleFocus, modifiers }) => (
  <Anchor
    disabled={modifiers.disabled}
    key={option.value}
    onClick={handleClick}
    onFocus={handleFocus}
    className={clsx('body-copy', {
      [styles.active]: modifiers.active
    })}>
    {option.text}
  </Anchor>
)

// A custom menu renderer for Select2
const renderMenu: ItemListRenderer<SelectInputOption> = ({ items, itemsParentRef, renderItem }) => {
  // eslint-disable-next-line unicorn/no-array-callback-reference
  const renderedItems = items.map(renderItem).filter(item => item !== null)

  return (
    <ListMenu className={styles.optionsMenu} ref={itemsParentRef} uiVariant='secondary'>
      {renderedItems}
    </ListMenu>
  )
}

<Select<SelectInputOption>
  activeItem={focusedItem}
  disabled={disabled}
  filterable={false}
  itemDisabled={(item): boolean => Boolean(item.disabled)}
  itemListRenderer={renderMenu}
  itemRenderer={renderOption}
  items={items}
  itemsEqual={optionComparator}
  noResults={<div>No Results</div>}
  onActiveItemChange={onActiveItemChange}
  onItemSelect={onItemSelect}
  popoverProps={{
    matchTargetWidth: true,
    minimal: true,
    popoverClassName,
    transitionDuration: 0
  }}>
  <Button className={classNames} disabled={disabled} id={id} onBlur={onBlur} text={textValue ?? placeholder} />
</Select>
`