On Windows OS, browser's context menu opens if left click is not released within Datasheet Grid table. about react-datasheet-grid HOT 3 OPEN

@kenny-lu-hl what version are you on?

from react-datasheet-grid.

I am on 4.11.0

from react-datasheet-grid.

Quick Fix

This will check if the mouse is released over DSG's context menu. If true, then prevents the browser default behavior.

quick.fix.mp4

        const onContextMenu = useCallback(
            (event: MouseEvent) => {
               // True if clicked on elements with 'dsg-context-menu' or 'dsg-context-menu-item' class(es)
               const clickedOnDsgContextMenu = (event.target instanceof HTMLElement && event.target.className.includes('dsg-context-menu'))

               const clickInside = innerRef.current?.contains(event.target as Node) ||
                                              clickedOnDsgContextMenu ||
                                              false

                const cursorIndex = clickInside
                    ? getCursorIndex(event, true, true)
                    : null

                const clickOnActiveCell =
                    cursorIndex &&
                    activeCell &&
                    activeCell.col === cursorIndex.col &&
                    activeCell.row === cursorIndex.row &&
                    editing

                if (clickInside && !clickOnActiveCell) {
                    console.log('Prevented default event, since target is inside')
                    event.preventDefault()
                }
            },
            [getCursorIndex, activeCell, editing]
        )
        useDocumentEventListener('contextmenu', onContextMenu)

Updated the code snippet for Quick Fix. Added check to ensure the onClick event target is an HTML element, before checking if the element has class(es) named dsg-context-menu *

from react-datasheet-grid.