mui
[DataGrid] Fix first row flickering with autoHeight enabled
Fixes the first row flickering when a new, editable row is added to a grid with autoHeight enabled.
Fixes #13270
The problem
1. User adds a new row
2. The new row gets rendered in the correct position, but the original row is hidden
This happens because the newly added editable cell calls .focus() when it mounts. The virtual scroller has a scroll event listener that listens to scroll events in order to recalculate which rows are in view to render. The browser tries to scroll the editable cell into view, and triggers the scroll event callback.
The scroll event handler receives an event.scrollTop position of 52px, and decides that the first row does not need rendering because based on this value, it is out of view. This is what leads to the temporary state of a hidden first row.
Why is this only a problem with autoHeight enabled?
When autoHeight is not enabled, the scroll event listener only fires when the virtual scroller content actually becomes scrollable. This means the editable cell moves into focus and there is no visible flicker.
With autoHeight enabled, the virtual scroller content temporarily overflows when a new row is added whilst it recalculates the virtual scroller content height.
3. The virtual scroller recalculates and re-renders both rows in the correct position
The solution
Disable row virtualization when autoHeight is enabled. Row virtualization has no performance gains when autoHeight is enabled as the list of rows never becomes scrollable. This in turn fixes the issue of the virtual scroller miscalculating which elements are in view.
- [x] I have followed (at least) the PR section of the contributing guide.
Deploy preview: https://deploy-preview-14235--material-ui-x.netlify.app/
Updated pages:
Generated by :no_entry_sign: dangerJS against 501b648c618a56f00ccbad756be5398f513c6c53
Thank you guys for bashing this bug !
Our users will be happy to have this fixed :pray: !!
