[Please, check this issue as fast as you can] Input loses its focus on row editing

This issue has been tracked since 2022-08-29.

Describe the bug

Currently grid allows us to edit only one cell, in my case I want to click on edit icon and render inputs for multiple editing.
When I type something in input - it loses focus and rerenders.

To Reproduce

  1. Define 'editable' property in a row, make conditional rendering in formatter for example:
    formatter(props) {
    return props.row.editable ? (
    <MemoizedEditor {...props} onClose={() => console.log('sdc')} />
    ) : (
    <>{props.row.assetType}</>
    );
    },

export const Editor = ({ row, column, onRowChange }: EditorProps) => {
return (
<Input
value={row[column.key as keyof Row] as unknown as string}
onChange={event => onRowChange({ ...row, [column.key]: event.target.value })}
/>
);
};

  1. Try to type characters in input

Link to code example:

Expected behavior

Environment

  • react-data-grid version: latest
  • react/react-dom version: latest

Additional context

Screen.Recording.2022-08-29.at.16.49.41.mov
ronyut wrote this answer on 2022-11-10

I encounter the same issue

More Details About Repo
Owner Name adazzle
Repo Name react-data-grid
Full Name adazzle/react-data-grid
Language TypeScript
Created Date 2015-03-06
Updated Date 2023-03-23
Star Count 5922
Watcher Count 129
Fork Count 2072
Issue Count 161

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date