#Show menu dropdown with right-click

9 messages · Page 1 of 1 (latest)

hearty fox
#

I am working on a new page and I was wondering if it is possible to open a menu dropdown when we right-click a row of a table.

This is how i am trying to call the menu:

    event.preventDefault();
    console.log('Right click pressed', eid);

    return (
      <Menu width={200} shadow="md" trigger="click">
        <Menu.Dropdown>
          <Menu.Item closeMenuOnClick>{lang?.GLOBAL_EVENT}</Menu.Item>
          <Menu.Item closeMenuOnClick>{lang?.EQUIPMENT_REGISTER}</Menu.Item>
          <Menu.Item closeMenuOnClick>{lang?.GLOBAL_ENTITY}</Menu.Item>
          <Menu.Item closeMenuOnClick>{lang?.GLOBAL_EQUIPMENT}</Menu.Item>
          <Menu.Item closeMenuOnClick>{lang?.GLOBAL_STATISTICS}</Menu.Item>
          <Menu.Item closeMenuOnClick>{lang?.EQUIPMENT_CONTRACT}</Menu.Item>
          <Menu.Item closeMenuOnClick>{lang?.EQUIPMENT_CREATE_TICKET}</Menu.Item>
          <Menu.Item closeMenuOnClick>{lang?.EQUIPMENT_CONSULT_TICKET}</Menu.Item>
          <Menu.Item closeMenuOnClick>{lang?.GLOBAL_AUDITLOG}</Menu.Item>
          <Menu.Item closeMenuOnClick>{lang?.EQUIPMENT_AUTHORIZE_INITIATION}</Menu.Item>
        </Menu.Dropdown>
      </Menu>
    );
  };```
#

and here is where i call the function to also connect the eid properly

                      key={index}
                      onClick={
                        checkEquipmentState(equipmentDetails?.status)
                          ? () => showEquipment(equipmentDetails.eid)
                          : undefined
                      }
                      onContextMenu={event => handleRightClick(event, equipmentDetails.eid)}
                      className={checkEquipmentState(equipmentDetails?.status) ? 'online-row' : 'offline-row'}
                    >```
elder glade
hearty fox
#

thank you so much for the extra info @elder glade I didn't know there could a hook for this 😄

hearty fox
#

I am having some trouble making the menu show up, i think i did all the steps correctly but something is not right or missing

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './app/client-redux/store';
import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';
import { createRoutesFromChildren, matchRoutes, useLocation, useNavigationType } from 'react-router-dom';
import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import { ContextMenuProvider } from 'mantine-contextmenu';

import '@mantine/core/styles.css';
import '@mantine/dates/styles.css';
import '@mantine/notifications/styles.css';
import './app.scss';

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.reactRouterV6Instrumentation(
        React.useEffect,
        useLocation,
        useNavigationType,
        createRoutesFromChildren,
        matchRoutes
      )
    })
  ],
  release: process.env.REACT_APP_VERSION,
  tracesSampleRate: Number(process.env.REACT_APP_SENTRY_TRACE_SAMPLE_RATE)
});

ReactDOM.render(
  <React.StrictMode>
    <MantineProvider>
      <ContextMenuProvider zIndex={5000} shadow="md" borderRadius="md">
        <Notifications />
        <Provider store={store}>
          <App />
        </Provider>
      </ContextMenuProvider>
    </MantineProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
elder glade
hearty fox
hearty fox
#

What if i want to have the entire row as the Menu.Target and have the mune dropdown when i click anywhere on the row?