Skip to content

Commit

Permalink
[DataGridPro] Do not render detail panel if the focused cell is not v…
Browse files Browse the repository at this point in the history
…isible (mui#13456)
  • Loading branch information
cherniavskii authored and thomasmoon committed Sep 6, 2024
1 parent c6b6d34 commit e765207
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -501,6 +501,29 @@ describe('<DataGridPro /> - Detail panel', () => {
expect(screen.getByTestId(`detail-panel-content`).textContent).to.equal(`${counter}`);
});

it("should not render detail panel for the focused row if it's outside of the viewport", function test() {
if (isJSDOM) {
this.skip(); // Needs layout
}
render(
<TestCase
getDetailPanelHeight={() => 50}
getDetailPanelContent={() => <div />}
rowBufferPx={0}
nbRows={20}
/>,
);

userEvent.mousePress(screen.getAllByRole('button', { name: 'Expand' })[0]);

const virtualScroller = document.querySelector(`.${gridClasses.virtualScroller}`)!;
virtualScroller.scrollTop = 500;
act(() => virtualScroller.dispatchEvent(new Event('scroll')));

const detailPanels = document.querySelectorAll(`.${gridClasses.detailPanel}`);
expect(detailPanels.length).to.equal(0);
});

describe('prop: onDetailPanelsExpandedRowIds', () => {
it('should call when a row is expanded or closed', () => {
const handleDetailPanelsExpandedRowIdsChange = spy();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -490,6 +490,10 @@ export const useGridVirtualScroller = () => {
/>,
);

if (isNotVisible) {
return;
}

const panel = panels.get(id);
if (panel) {
rows.push(panel);
Expand Down

0 comments on commit e765207

Please sign in to comment.