{
if (event.key === 'ArrowLeft' || event.key === 'Escape') {
event.preventDefault()
@@ -48,6 +49,20 @@ export default function ItemContextMenu({ x, y, title, groups, onClose }) {
const menuRef = useRef(null)
const [branch, setBranch] = useState(null)
const [position, setPosition] = useState({ left: x, top: y })
+ const branchTimer = useRef(null)
+ const cancelBranchChange = () => clearTimeout(branchTimer.current)
+ const openBranch = next => {
+ cancelBranchChange()
+ setBranch(next)
+ }
+ const hoverBranch = next => {
+ cancelBranchChange()
+ if (branch?.group.label === next?.group.label) return
+ // Allow diagonal pointer travel across other rows into the open submenu.
+ if (branch) branchTimer.current = setTimeout(() => setBranch(next), 200)
+ else setBranch(next)
+ }
+ useEffect(() => () => clearTimeout(branchTimer.current), [])
useLayoutEffect(() => {
const menu = menuRef.current
@@ -87,7 +102,7 @@ export default function ItemContextMenu({ x, y, title, groups, onClose }) {
: event.key === 'Home' ? 0 : event.key === 'End' ? buttons.length - 1 : null
if (next !== null) {
event.preventDefault()
- if (event.target.closest('[role="menu"]') === rootRef.current) setBranch(null)
+ if (event.target.closest('[role="menu"]') === rootRef.current) openBranch(null)
buttons[next]?.focus()
}
}
@@ -98,18 +113,18 @@ export default function ItemContextMenu({ x, y, title, groups, onClose }) {
{title}
{groups.filter(group => group.actions.length).map(group => group.actions.length === 1 ? (
-
setBranch(null)} />
+ hoverBranch(null)} />
) : (
))}