Add GridContextMenu, which has access to Grid item menu was opened on

Open
#246 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the Grid and ContextMenu entry points shown in the issue: @hilla/react-components/Grid.js and @hilla/react-components/ContextMenu.js. Trace GridElement's context-menu event and getEventContext behavior, then determine how a GridContextMenu should expose the item that opened it to item selection. Done means menu actions can identify the originating body item while header-row menus are prevented.

Written by the indexing model from the issue text.

Description

enhancement

We are lacking GridConextMenu. Hence doing ContextMenu to operate Grid items is having bad DX.

Here are some additional code you need for getting the Grid item and use it when menu item selected
First import the types you need

import { Grid, type GridElement } from '@hilla/react-components/Grid.js';
import { ContextMenu, ContextMenuItemSelectedEvent } from '@hilla/react-components/ContextMenu.js';

We need to use ref to get underlying element for listening context menu open in Grid

const gridRef = useRef<GridElement>(null);
const [contextItem, setContextItem] = useState<Item | undefined>(undefined);

We set the opening listener in useEffect using the ref. There we can get the item on which the menu was opened, can set state variable of the last item where opening happened

useEffect(() => {
  const grid = gridRef.current;
  if (grid) {
    // Workaround: Prevent opening context menu on header row.
    // @ts-expect-error vaadin-contextmenu isn't a GridElement event.
    grid.addEventListener('vaadin-contextmenu', (e) => {
      if (grid.getEventContext(e).section !== 'body') {
        e.stopPropagation();
      } else {
        const item = grid.getEventContext(e).item;
        setContextItem(item);
      }
    });
  }
}, []);

Add menu item selected listener

<ContextMenu onItemSelected={onContextMenu} items={menuItems}>

This event is triggered when user selects menu item, thus happening after open event. And we can use the state variable contextItem we set at opening

function onContextMenu(e: ContextMenuItemSelectedEvent) {
   Notification.show(contextItem?.name + ' clicked');
}
Dominant language
TypeScript
Stars
18
Forks
4
Avg merge
52m
Merged PRs (30d)
7

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from vaadin/react-components

All issues in vaadin/react-components

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.