diff --git a/ui/src/table.test.tsx b/ui/src/table.test.tsx
index 8f362cbfcb5..f6840842a5d 100644
--- a/ui/src/table.test.tsx
+++ b/ui/src/table.test.tsx
@@ -550,6 +550,83 @@ describe('Table.tsx', () => {
fireEvent.click(getAllByText('open')[2].parentElement as HTMLDivElement)
expect(getAllByRole('gridcell')[0].textContent).toBe('b')
})
+
+ it('Keep sort order after applying search - no groups', () => {
+ tableProps = {
+ ...tableProps,
+ rows: [
+ { name: '3', cells: ['c', 'closed'] },
+ { name: '2', cells: ['b', 'open'] },
+ { name: '1', cells: ['a', 'open'] }
+ ],
+ columns: [
+ { name: 'colname1', label: 'Col1', sortable: true },
+ { name: 'colname2', label: 'Col2', searchable: true },
+ ],
+ }
+ const { container, getAllByRole, getByTestId } = render()
+
+ // Sort by first column
+ expect(getAllByRole('gridcell')[0].textContent).toBe('c')
+ fireEvent.click(container.querySelectorAll('.ms-DetailsHeader-cellTitle')[0])
+ expect(getAllByRole('gridcell')[0].textContent).toBe('a')
+
+ // Search
+ expect(getAllByRole('row')).toHaveLength(tableProps.rows!.length + headerRow)
+ fireEvent.change(getByTestId('search'), { target: { value: 'No match!' } })
+ expect(getAllByRole('row')).toHaveLength(headerRow)
+ fireEvent.change(getByTestId('search'), { target: { value: '' } })
+ expect(getAllByRole('row')).toHaveLength(tableProps.rows!.length + headerRow)
+
+ expect(getAllByRole('gridcell')[0].textContent).toBe('a')
+ })
+
+ it('Keep sort after applying search - groups', () => {
+ tableProps = {
+ ...tableProps,
+ groupable: true,
+ rows: [
+ { name: '4', cells: ['d', 'closed'] },
+ { name: '3', cells: ['c', 'closed'] },
+ { name: '2', cells: ['b', 'open'] },
+ { name: '1', cells: ['a', 'open'] }
+ ],
+ columns: [
+ { name: 'colname1', label: 'Col1', sortable: true },
+ { name: 'colname2', label: 'Col2', searchable: true },
+ ],
+ }
+ const { container, getAllByText, getAllByRole, getByTestId } = render()
+
+ fireEvent.click(getByTestId('groupby'))
+ fireEvent.click(getAllByText('Col2')[1]!)
+ fireEvent.click(container.querySelector('.ms-DetailsHeader-collapseButton')!)
+
+ expect(getAllByRole('gridcell')[3].textContent).toBe('d')
+ expect(getAllByRole('gridcell')[6].textContent).toBe('c')
+ expect(getAllByRole('gridcell')[11].textContent).toBe('b')
+ expect(getAllByRole('gridcell')[14].textContent).toBe('a')
+
+ // Sort by first column
+ fireEvent.click(container.querySelectorAll('.ms-DetailsHeader-cellTitle')[0])
+
+ expect(getAllByRole('gridcell')[3].textContent).toBe('c')
+ expect(getAllByRole('gridcell')[6].textContent).toBe('d')
+ expect(getAllByRole('gridcell')[11].textContent).toBe('a')
+ expect(getAllByRole('gridcell')[14].textContent).toBe('b')
+
+ // Search
+ expect(getAllByRole('row')).toHaveLength(tableProps.rows!.length + headerRow + groupHeaderRowsCount)
+ fireEvent.change(getByTestId('search'), { target: { value: 'No match!' } })
+ expect(getAllByRole('row')).toHaveLength(headerRow)
+ fireEvent.change(getByTestId('search'), { target: { value: '' } })
+ expect(getAllByRole('row')).toHaveLength(tableProps.rows!.length + headerRow + groupHeaderRowsCount)
+
+ expect(getAllByRole('gridcell')[3].textContent).toBe('c')
+ expect(getAllByRole('gridcell')[6].textContent).toBe('d')
+ expect(getAllByRole('gridcell')[11].textContent).toBe('a')
+ expect(getAllByRole('gridcell')[14].textContent).toBe('b')
+ })
})
describe('search', () => {