Skip to content

Commit 47d517c

Browse files
[DataTable] Fixes bug in DataTable tooltips when using truncate prop (#6914)
* Fixes bug with tooltips where they become disassociated when content gets sorted * Adds changeset * Ensures tooltip content links will not be blue * Use `innerText` instead of `{children}` for tooltip content * Disable eslint `scrollable-region-focusable` in `data-table-default` example * Update `DataTable.stories.tsx` to ignore `scrollable-region-focusable` * Update `Filters.stories.tsx` to remove `scrollable-region-focusable` rule * Simplified implementation * Remove uneccessary comment * Remove incorrect eslint-disable comment * Update .changeset/metal-impalas-type.md Co-authored-by: Lo Kim <[email protected]> Co-authored-by: Lo Kim <[email protected]>
1 parent d676abd commit 47d517c

File tree

4 files changed

+45
-23
lines changed

4 files changed

+45
-23
lines changed

.changeset/metal-impalas-type.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Fixed bug in `DataTable` where tooltips become disassociated when rows get sorted

polaris-react/src/components/DataTable/DataTable.stories.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ import {Card, DataTable, Link, Page} from '@shopify/polaris';
44

55
export default {
66
component: DataTable,
7+
parameters: {
8+
a11y: {
9+
config: {
10+
rules: [{id: 'scrollable-region-focusable', enabled: false}],
11+
},
12+
},
13+
},
714
} as ComponentMeta<typeof DataTable>;
815

916
export function Default() {

polaris-react/src/components/DataTable/components/Cell/Cell.tsx

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {FocusEventHandler, useState} from 'react';
1+
import React, {FocusEventHandler, useRef} from 'react';
22
import {SortAscendingMajor, SortDescendingMajor} from '@shopify/polaris-icons';
33

44
import {classNames, variationName} from '../../../../utilities/css';
@@ -63,20 +63,6 @@ export function Cell({
6363
const i18n = useI18n();
6464
const numeric = contentType === 'numeric';
6565

66-
const [showTooltip, setShowTooltip] = useState(false);
67-
const [tooltipContent, setTooltipContent] = useState('');
68-
69-
function setTooltip(ref: HTMLTableCellElement | null) {
70-
if (!ref) {
71-
return;
72-
}
73-
// Since the cell can accept any React node, we'll only show a tooltip when the cell content has an innerText
74-
if (ref.scrollWidth > ref.offsetWidth && ref.innerText) {
75-
setShowTooltip(true);
76-
setTooltipContent(ref.innerText);
77-
}
78-
}
79-
8066
const className = classNames(
8167
styles.Cell,
8268
styles[`Cell-${variationName('verticalAlign', verticalAlign)}`],
@@ -180,17 +166,10 @@ export function Cell({
180166
scope="row"
181167
{...colSpanProp}
182168
ref={(ref) => {
183-
setTooltip(ref);
184169
setRef(ref);
185170
}}
186171
>
187-
{showTooltip ? (
188-
<Tooltip content={tooltipContent}>
189-
<span className={styles.TooltipContent}>{content}</span>
190-
</Tooltip>
191-
) : (
192-
content
193-
)}
172+
<TruncatedText className={styles.TooltipContent}>{content}</TruncatedText>
194173
</th>
195174
);
196175

@@ -205,3 +184,25 @@ export function Cell({
205184

206185
return stickyHeadingCell ? stickyHeading : cellMarkup;
207186
}
187+
188+
const TruncatedText = ({
189+
children,
190+
className = '',
191+
}: {
192+
children: React.ReactNode;
193+
className?: string;
194+
}) => {
195+
const textRef = useRef<any | null>(null);
196+
const {current} = textRef;
197+
const text = (
198+
<span ref={textRef} className={className}>
199+
{children}
200+
</span>
201+
);
202+
203+
return current?.scrollWidth > current?.offsetWidth ? (
204+
<Tooltip content={textRef.current.innerText}>{text}</Tooltip>
205+
) : (
206+
text
207+
);
208+
};

polaris-react/src/components/Filters/Filters.stories.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@ import {
1515

1616
export default {
1717
component: Filters,
18+
parameters: {
19+
a11y: {
20+
config: {
21+
// disabled due to DataTable having a scrollable region without
22+
// keyboard access when all content fits without scrolling.
23+
rules: [{id: 'scrollable-region-focusable', enabled: false}],
24+
},
25+
},
26+
},
1827
} as ComponentMeta<typeof Filters>;
1928

2029
export function WithAResourceList() {

0 commit comments

Comments
 (0)