Skip to content

Commit f618647

Browse files
Lukas742Lukas742
authored
fix(AnalyticalTable): use unique id for header cells (#4479)
Fixes #4462
1 parent d55dae8 commit f618647

File tree

5 files changed

+76
-37
lines changed

5 files changed

+76
-37
lines changed

‎packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

Lines changed: 64 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -541,7 +541,7 @@ describe('AnalyticalTable', () => {
541541
);
542542

543543
// select all
544-
cy.get('#__ui5wcr__internal_selection_column').click();
544+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
545545

546546
// expand
547547
cy.get('[aria-rowindex="2"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-icon]').click();
@@ -555,11 +555,15 @@ describe('AnalyticalTable', () => {
555555
cy.get('[aria-rowindex="4"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
556556
cy.get('[aria-rowindex="3"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
557557
cy.get('[aria-rowindex="2"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
558-
cy.get('#__ui5wcr__internal_selection_column [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
558+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"] [ui5-checkbox]').should(
559+
'have.attr',
560+
'indeterminate',
561+
'true'
562+
);
559563

560564
// deselect all
561-
cy.get('#__ui5wcr__internal_selection_column').click();
562-
cy.get('#__ui5wcr__internal_selection_column').click();
565+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
566+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
563567
cy.get('@onIndeterminateChangeSpy').should('have.callCount', 2);
564568

565569
// select leaf row
@@ -569,11 +573,15 @@ describe('AnalyticalTable', () => {
569573
cy.get('[aria-rowindex="4"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
570574
cy.get('[aria-rowindex="3"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
571575
cy.get('[aria-rowindex="2"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
572-
cy.get('#__ui5wcr__internal_selection_column [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
576+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"] [ui5-checkbox]').should(
577+
'have.attr',
578+
'indeterminate',
579+
'true'
580+
);
573581

574582
// deselect all
575-
cy.get('#__ui5wcr__internal_selection_column').click();
576-
cy.get('#__ui5wcr__internal_selection_column').click();
583+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
584+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
577585
cy.get('@onIndeterminateChangeSpy').should('have.callCount', 4);
578586

579587
// select row with subRows
@@ -587,7 +595,11 @@ describe('AnalyticalTable', () => {
587595
cy.get('[aria-rowindex="8"] > [aria-colindex="1"]').should('have.attr', 'aria-selected', 'true');
588596
cy.get('[aria-rowindex="3"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
589597
cy.get('[aria-rowindex="2"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
590-
cy.get('#__ui5wcr__internal_selection_column [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
598+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"] [ui5-checkbox]').should(
599+
'have.attr',
600+
'indeterminate',
601+
'true'
602+
);
591603
});
592604

593605
it('useIndeterminateRowSelection', () => {
@@ -602,7 +614,7 @@ describe('AnalyticalTable', () => {
602614
/>
603615
);
604616
// select all
605-
cy.get('#__ui5wcr__internal_selection_column').click();
617+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
606618

607619
// expand
608620
cy.get('[aria-rowindex="2"] > [aria-colindex="2"] > [title="Expand Node"] > [ui5-icon]').click();
@@ -616,11 +628,15 @@ describe('AnalyticalTable', () => {
616628
cy.get('[aria-rowindex="4"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
617629
cy.get('[aria-rowindex="3"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
618630
cy.get('[aria-rowindex="2"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
619-
cy.get('#__ui5wcr__internal_selection_column [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
631+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"] [ui5-checkbox]').should(
632+
'have.attr',
633+
'indeterminate',
634+
'true'
635+
);
620636

621637
// deselect all
622-
cy.get('#__ui5wcr__internal_selection_column').click();
623-
cy.get('#__ui5wcr__internal_selection_column').click();
638+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
639+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
624640
cy.get('@onIndeterminateChangeSpy').should('have.callCount', 2);
625641

626642
// select leaf row
@@ -630,11 +646,15 @@ describe('AnalyticalTable', () => {
630646
cy.get('[aria-rowindex="4"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
631647
cy.get('[aria-rowindex="3"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
632648
cy.get('[aria-rowindex="2"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
633-
cy.get('#__ui5wcr__internal_selection_column [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
649+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"] [ui5-checkbox]').should(
650+
'have.attr',
651+
'indeterminate',
652+
'true'
653+
);
634654

635655
// deselect all
636-
cy.get('#__ui5wcr__internal_selection_column').click();
637-
cy.get('#__ui5wcr__internal_selection_column').click();
656+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
657+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
638658
cy.get('@onIndeterminateChangeSpy').should('have.callCount', 4);
639659

640660
// select row with subRows
@@ -648,7 +668,11 @@ describe('AnalyticalTable', () => {
648668
cy.get('[aria-rowindex="8"] > [aria-colindex="1"]').should('have.attr', 'aria-selected', 'false');
649669
cy.get('[aria-rowindex="3"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
650670
cy.get('[aria-rowindex="2"] > [aria-colindex="1"] [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
651-
cy.get('#__ui5wcr__internal_selection_column [ui5-checkbox]').should('have.attr', 'indeterminate', 'true');
671+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"] [ui5-checkbox]').should(
672+
'have.attr',
673+
'indeterminate',
674+
'true'
675+
);
652676
});
653677

654678
it('Grow Mode: maxWidth', () => {
@@ -681,10 +705,10 @@ describe('AnalyticalTable', () => {
681705
);
682706
};
683707
cy.mount(<TableComp data={data} />);
684-
cy.get('#name').invoke('outerWidth').should('equal', 700);
708+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 700);
685709

686710
cy.findByText('Custom maxWidth').click();
687-
cy.get('#name').invoke('outerWidth').should('equal', 5008);
711+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', 5008);
688712
});
689713

690714
it('Column Scaling: programatically change cols', () => {
@@ -755,16 +779,16 @@ describe('AnalyticalTable', () => {
755779
cy.mount(<TestComp data={data} {...item.props} />);
756780

757781
cy.findByText('Both').click();
758-
cy.get('#name').invoke('outerWidth').should('equal', item.bothWidth);
759-
cy.get('#age').invoke('outerWidth').should('equal', item.bothWidth);
782+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', item.bothWidth);
783+
cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', item.bothWidth);
760784

761785
cy.findByText('NameCol').click();
762-
cy.get('#name').invoke('outerWidth').should('equal', item.onlyNameWidth);
763-
cy.get('#age').should('not.exist', { timeout: 100 });
786+
cy.get('[data-column-id="name"]').invoke('outerWidth').should('equal', item.onlyNameWidth);
787+
cy.get('[data-column-id="age"]').should('not.exist', { timeout: 100 });
764788

765789
cy.findByText('AgeCol').click();
766-
cy.get('#age').invoke('outerWidth').should('equal', item.onlyAgeWidth);
767-
cy.get('#name').should('not.exist', { timeout: 100 });
790+
cy.get('[data-column-id="age"]').invoke('outerWidth').should('equal', item.onlyAgeWidth);
791+
cy.get('[data-column-id="name"]').should('not.exist', { timeout: 100 });
768792
});
769793
});
770794

@@ -803,15 +827,22 @@ describe('AnalyticalTable', () => {
803827
cy.wait(200);
804828

805829
cy.findByText('set clientWidth').click();
806-
['#name', '#age', '#friend\\.name', '#friend\\.age'].forEach((col) => {
830+
[
831+
'[data-column-id="name"]',
832+
'[data-column-id="age"]',
833+
'[data-column-id="friend\\.name"]',
834+
'[data-column-id="friend\\.age"]'
835+
].forEach((col) => {
807836
cy.get(col).invoke('outerWidth').should('equal', 300);
808837
});
809838

810839
cy.findByText('hide age col').click();
811-
['#name', '#friend\\.name', '#friend\\.age'].forEach((col) => {
812-
cy.get(col).invoke('outerWidth').should('equal', 400);
813-
});
814-
cy.get('#age').should('not.exist', { timeout: 100 });
840+
['[data-column-id="name"]', '[data-column-id="friend\\.name"]', '[data-column-id="friend\\.age"]'].forEach(
841+
(col) => {
842+
cy.get(col).invoke('outerWidth').should('equal', 400);
843+
}
844+
);
845+
cy.get('[data-column-id="age"]').should('not.exist', { timeout: 100 });
815846
});
816847

817848
it('InfiniteScroll', () => {
@@ -1469,7 +1500,9 @@ describe('AnalyticalTable', () => {
14691500
);
14701501
};
14711502
cy.mount(<TestComponent onRowSelect={select} onRowClick={click} />);
1472-
cy.get('#__ui5wcr__internal_selection_column[role="columnheader"]').find('[ui5-checkbox]').should('not.exist');
1503+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"][role="columnheader"]')
1504+
.find('[ui5-checkbox]')
1505+
.should('not.exist');
14731506
let selectCalled = 0;
14741507
let clickCalled = 1;
14751508
// colindex 1 === selection cell
@@ -1578,7 +1611,7 @@ describe('AnalyticalTable', () => {
15781611
cy.mount(<AnalyticalTable data={dataTree} columns={columns} isTreeTable />);
15791612
cy.get('[data-empty-row="true"]').should('have.length', 3);
15801613
cy.mount(<ShowSelectedComp />);
1581-
cy.get('#__ui5wcr__internal_selection_column').click();
1614+
cy.get('[data-column-id="__ui5wcr__internal_selection_column"]').click();
15821615
cy.findByText('Show Selected').click();
15831616
cy.findByText('Selected: {"0":true,"1":true,"2":true,"3":true}').should('be.visible');
15841617
cy.get('[data-empty-row="true"]').click();

‎packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ interface ColumnHeaderContainerProps {
3737
portalContainer: Element;
3838
columnVirtualizer: Virtualizer<DivWithCustomScrollProp>;
3939
scaleXFactor?: number;
40+
uniqueId: string;
4041
}
4142

4243
const useStyles = createUseStyles(styles, { name: 'Resizer' });
@@ -57,7 +58,8 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
5758
isRtl,
5859
portalContainer,
5960
columnVirtualizer,
60-
scaleXFactor
61+
scaleXFactor,
62+
uniqueId
6163
} = props;
6264

6365
const classes = useStyles();
@@ -98,6 +100,8 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
98100
)}
99101
<ColumnHeader
100102
{...rest}
103+
id={`${uniqueId}${rest?.id ?? ''}`}
104+
columnId={rest.id}
101105
visibleColumnIndex={index}
102106
columnIndex={virtualColumn.index}
103107
onSort={onSort}

‎packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export interface ColumnHeaderProps {
4141
children: ReactNode | ReactNode[];
4242
portalContainer: Element;
4343
scaleXFactor?: number;
44+
columnId?: string;
4445

4546
//getHeaderProps()
4647
id: string;
@@ -100,6 +101,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
100101
id,
101102
children,
102103
column,
104+
columnId,
103105
className,
104106
style,
105107
onSort,
@@ -238,7 +240,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
238240
onDragStart={onDragStart}
239241
onDrop={onDrop}
240242
onDragEnd={onDragEnd}
241-
data-column-id={id}
243+
data-column-id={columnId}
242244
onClick={handleHeaderCellClick}
243245
onKeyDown={handleHeaderCellKeyDown}
244246
onKeyUp={handleHeaderCellKeyUp}
@@ -252,16 +254,16 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
252254
style={textStyle}
253255
className={clsx(
254256
classes.text,
255-
id === '__ui5wcr__internal_selection_column' && classes.selectAllCheckBoxContainer
257+
columnId === '__ui5wcr__internal_selection_column' && classes.selectAllCheckBoxContainer
256258
)}
257-
data-component-name={`AnalyticalTableHeaderHeaderContentContainer-${id}`}
259+
data-component-name={`AnalyticalTableHeaderHeaderContentContainer-${columnId}`}
258260
>
259261
{children}
260262
</Text>
261263
<div
262264
className={classes.iconContainer}
263265
style={iconContainerDirectionStyles}
264-
data-component-name={`AnalyticalTableHeaderIconsContainer-${id}`}
266+
data-component-name={`AnalyticalTableHeaderIconsContainer-${columnId}`}
265267
>
266268
{isFiltered && <Icon name={iconFilter} aria-hidden />}
267269
{column.isSorted && (

‎packages/main/src/components/AnalyticalTable/hooks/useRowSelectionColumn.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,6 @@ const columns = (currentColumns, { instance }) => {
155155
return [
156156
{
157157
id: '__ui5wcr__internal_selection_column',
158-
accessor: '__ui5wcr__internal_selection_column',
159158
disableFilters: true,
160159
disableSortBy: true,
161160
disableGroupBy: true,

‎packages/main/src/components/AnalyticalTable/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1084,6 +1084,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
10841084
portalContainer={portalContainer}
10851085
columnVirtualizer={columnVirtualizer}
10861086
scaleXFactor={scaleXFactor}
1087+
uniqueId={uniqueId}
10871088
/>
10881089
)
10891090
);

0 commit comments

Comments
 (0)