MenuItem is not processable with enter key when not Link element about zag HOT 3 CLOSED

import * as menu from "@zag-js/menu"
import { useMachine, normalizeProps } from "@zag-js/react"
import { useId } from "react"

export function Menu() {
  const [state, send] = useMachine(menu.machine({ id: useId() }))

  const api = menu.connect(state, send, normalizeProps)

  return (
    <div>
      <button {...api.triggerProps}>
        Actions <span {...api.indicatorProps}>▾</span>
      </button>
      <div {...api.positionerProps}>
        <ul {...api.contentProps}>
          <li {...api.getItemProps({ value: "edit" })}>Edit</li>
          <li {...api.getItemProps({ value: "delete" })}>Delete</li>
        </ul>
      </div>
    </div>
  )
}

import * as menu from "@zag-js/menu"
import { useMachine, normalizeProps } from "@zag-js/react"
import { useId } from "react"

export function Menu() {
  const [state, send] = useMachine(menu.machine({ 
    id: useId(),
    onSelect(details) {
      switch(details.value) {
        case "edit":
          callEditAPI()
        case "delete":
          callDeleteAPI()
        // If there are more menu items, this would continue
      }
    }
  }))
  ...
}

export function Menu() {
  ...
  return (
    <div>
      ...
      <div {...api.positionerProps}>
        <ul {...api.contentProps}>
          <li {...api.getItemProps({ value: "edit", onSelectItem: () => callEditAPI() })}>Edit</li>
          <li {...api.getItemProps({ value: "delete", onSelectItem: () => callDeleteAPI() })}>Delete</li>
        </ul>
      </div>
    </div>
  )
}