Continuous Typing Issue in Kendo React Grid Cell

47 views Asked by At

I'm facing an issue in my Kendo React Grid where I'm using an input field in a custom cell (ProgressCell) to allow users to enter comments continuously. However, the input field seems to lose focus after each typed letter, making it difficult for users to enter complete comments without focusing on the input field for each letter. I want to post the value of input cell along with other columns value.

Here's a simplified version of my code:

const [allComments, setAllComments] = useState([]);

const handleCommentChange = (event, ATT_ID) => {
    const commentIndex = allComments.findIndex((comment) => comment.ATT_ID === ATT_ID);

    if (commentIndex !== -1) {
        const updatedComments = [...allComments];
        updatedComments[commentIndex] = { ATT_ID, comment: event.target.value };
        setAllComments(updatedComments);
    } else {
        setAllComments((prevComments) => [...prevComments, { ATT_ID, comment: event.target.value }]);
    }
};

const ProgressCell = (props) => {
    if (props.rowType === 'groupHeader') {
        return null;
    }

    const commentObject = allComments.find((comment) => comment.ATT_ID === props.dataItem.ATT_ID);

    return (
        <td>
            <div style={{ display: 'flex', alignItems: 'center' }}>
                <Input
                    type="text"
                    value={commentObject ? commentObject.comment : ''}
                    onChange={(event) => handleCommentChange(event, props.dataItem.ATT_ID)}
                    style={{
                        border: "2px solid #ccc",
                        boxShadow: "inset 0px 0px 0.5px 0px rgba(0,0,0,0.1)",
                        height: "25px",
                        marginLeft: 'auto',
                        marginRight: 'auto',
                        display: 'block',
                    }}
                />
            </div>
        </td>
    );
};

// Grid configuration with ProgressCell
// ...
 <GridColumn
     field="STATUS"
     title="Comments"
     filterable={false}
     cell={ProgressCell}
/>

0

There are 0 answers