Facing issues in focussing the Cell in v5 version #495

mithun-jigsaw · 2025-02-05T05:50:24Z

mithun-jigsaw
Feb 5, 2025



import { FC, useEffect, useRef, useState } from "react";
import { CellWrapper, useCellContext, useDoubleTouch, isValidKey, useReactGridAPI } from '@silevis/reactgrid'
import { ControlledMenu, MenuItem } from "@szhsin/react-menu";
import CustomContextMenu from "./ContextMenu";


interface TextCellProps {
    text: string;
    onTextChanged: (newText: string) => void;
    style?: React.CSSProperties;
    gridId: string;
    menuOptions?: {
        label: string;
        eventHandler: (...args: any[]) => void;
    }[]
}

export const CustomTextCell: FC<TextCellProps> = ({ text: initialText, onTextChanged, style, gridId, menuOptions = [] }) => {
    const ctx = useCellContext();
    const targetInputRef = useRef<HTMLInputElement>(null);
    const [isEditMode, setEditMode] = useState(false);
    const [currentValue, setCurrentValue] = useState(initialText || "");
    const escapePressedRef = useRef(false);
    const { handleDoubleTouch } = useDoubleTouch(ctx, setEditMode);
    const [anchorPoint, setAnchorPoint] = useState({ x: 0, y: 0 });
    const [isOpen, setOpen] = useState(false);


    const { setFocusedCell, getFocusedCell } = useReactGridAPI(gridId)

    useEffect(() => {
        setCurrentValue(initialText);
    }, [initialText]);

    // useEffect(() => {
    //     console.log('ctx', ctx, 'focused cell', getFocusedCell())
    //     if (getFocusedCell()?.rowIndex == ctx.realRowIndex && getFocusedCell()?.colIndex == ctx.realColumnIndex) {
    //         if (!ctx.isFocused) {
    //             console.log('focus worked on text cell')
    //             setFocusedCell({ rowIndex: ctx.realRowIndex, colIndex: ctx.realColumnIndex });
    //         }
    //     }
    // }, [getFocusedCell(), ctx?.isFocused])

    // Place this code in a useEffect in your top-level component (or even in the browser console for testing)
    // useEffect(() => {
    //     const handler = (e) => {
    //         console.log("Document captured keydown:", e.key, document.activeElement);
    //     };
    //     document.addEventListener("keydown", handler, true); // 'true' means capturing phase
    //     return () => {
    //         document.removeEventListener("keydown", handler, true);
    //     };
    // }, []);


    return (
        <CellWrapper
             => initialText}
             => onTextChanged?.(v)}
            
            style={style}
             => {
                if (ctx.isFocused) {
                    setCurrentValue(initialText || "");
                    setEditMode(true);
                }
            }}
             => {
                // Optionally, set focus on click as well
                console.log('focus worked on text cell')
                e.preventDefault();
                setFocusedCell({ rowIndex: ctx.realRowIndex, colIndex: ctx.realColumnIndex });
            }}
             => {
                console.log('key down', e.key);
                console.log("CellWrapper onKeyDown:", e.key);
                if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
                    console.log("Arrow key detected in CellWrapper; not stopping propagation");
                    return; // Do nothing so ReactGrid can catch it
                }
                if (!isEditMode && isValidKey(e, [])) {
                    console.log('coming in this')
                    e.stopPropagation();
                    setCurrentValue("");
                    setEditMode(true);
                } else if (!isEditMode && !ctx.isSelected && (e.key === "Enter" || e.key === "F2")) {
                    e.stopPropagation();
                    setCurrentValue(initialText || "");
                    setEditMode(true);
                }
            }}
             => {
                if (typeof document.hasFocus === 'function' && !document.hasFocus()) return;
                e.preventDefault();
                if (!ctx.isSelected) {
                    setFocusedCell({
                        rowIndex: ctx.realRowIndex,
                        colIndex: ctx.realColumnIndex,
                    })
                }
                setAnchorPoint({ x: e.clientX, y: e.clientY });
                setOpen(true);
            }}
        >
            {isEditMode ? (
                <input
                    className="rg-input"
                    value={currentValue}
                     => setCurrentValue(e.currentTarget.value)}
                     => {
                        if (!escapePressedRef.current) {
                            onTextChanged?.(e.currentTarget.value);
                        }
                        setEditMode(false);
                        if (escapePressedRef.current) {
                            escapePressedRef.current = false;
                        }
                    }}
                    //  => e.stopPropagation()}
                    //  => e.stopPropagation()}
                    //  => e.stopPropagation()}
                    //  => e.stopPropagation()}
                     => {
                        if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
                            console.log("Arrow key in input allowed");
                            return;
                        }
                        // const controlKeys = ["Escape", "Enter", "Tab"];
                        // if (!controlKeys.includes(e.key)) {
                        //     e.stopPropagation();
                        // }
                        if (e.key === "Escape") {
                            // escapePressedRef.current = true;
                            setEditMode(false);
                        } else if (e.key === "Enter") {
                            setEditMode(false);
                            onTextChanged?.(e.currentTarget.value);
                        }
                    }}
                    autoFocus
                    ref={targetInputRef}
                />
            ) : (
                initialText
            )}
        </CellWrapper>
    );
};

I wanted to implement a Context-Menu feature by extending the TextCell but I'm facing an issue wherein the Navigation keys are not working when the cell gets focused.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Facing issues in focussing the Cell in v5 version #495

{{title}}

Replies: 0 comments

Select a reply

Facing issues in focussing the Cell in v5 version #495

mithun-jigsaw Feb 5, 2025

Replies: 0 comments

mithun-jigsaw
Feb 5, 2025