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

[IlyaNeron]

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<Row>) => { return ( <Input value={row[column.key as keyof Row] as unknown as string} onChange={event => onRowChange({ ...row, [column.key]: event.target.value })} /> ); };

2. 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

https://user-images.githubusercontent.com/34775579/187216814-edad545e-9d9f-4631-aa2b-f56e2e1e919b.mov

[ronyut]

I encounter the same issue

[amanmahajan7]

Please create a reproducible example.