Reactive Grid - Cells lose focus when editing a new row if react-sortable-hoc is used

[onebalaban]

• [x] I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• [x] React Grid

Current Behaviour

Cells lose focus when editing a new row if react-sortable-hoc is used.

Expected Behaviour

Cells should not lose focus. For instance, see the behavior when an existing row is edited.

Steps to Reproduce

1. Click the "NEW" button.
2. Type the text in a cell.

Link to the example that reproduces the issue: CodeSandBox.

Environment

• devextreme-reactive: 2.7.1
• react: 16.13.1
• browser: Chrome
• bootstrap: none
• react-bootstrap: none
• material-ui: 4.11.0
• react-sortable-hoc: 1.11.0

See also

This bug report is based on the following ticket: T969302.

[Krijovnick]

We need more time to change the current behavior, because the fix leads to Breaking Changes and requires major reworking. Until we fix it, use the following workaround. Move the wrapped TableRow and TableBody components out of the TableRowComponent and TableBodyComponent methods to prevent them from being recreated on every re-render. I created an example to demonstrate this.