diff --git a/src/mixed-line-bar-chart/__integ__/mixed-line-bar-chart.test.ts b/src/mixed-line-bar-chart/__integ__/mixed-line-bar-chart.test.ts index 0a11044593..888b38d41d 100644 --- a/src/mixed-line-bar-chart/__integ__/mixed-line-bar-chart.test.ts +++ b/src/mixed-line-bar-chart/__integ__/mixed-line-bar-chart.test.ts @@ -499,6 +499,22 @@ describe('Details popover', () => { await expect(page.getText(popoverHeaderSelector())).resolves.toContain('Potatoes'); }) ); + + test( + 'Should still open popver when focus move out then move in again with keyboard', + setupTest('#/light/bar-chart/test', async page => { + await page.click('#focus-target'); + // Should open popver when focus on a bar with keyboard + await page.keys(['Tab', 'Tab', 'ArrowRight']); + await expect(page.isDisplayed(popoverContentSelector())).resolves.toBe(true); + // Should close popver when lose focus + await page.keys(['Tab', 'Tab']); + await expect(page.isDisplayed(popoverContentSelector())).resolves.toBe(false); + // Should open popver when move focus back to the bar + await page.keys(['Shift', 'Tab', 'ArrowRight']); + await expect(page.isDisplayed(popoverContentSelector())).resolves.toBe(true); + }) + ); }); describe('Chart container', () => { diff --git a/src/mixed-line-bar-chart/chart-container.tsx b/src/mixed-line-bar-chart/chart-container.tsx index 54ec3ef15d..40d1e36fed 100644 --- a/src/mixed-line-bar-chart/chart-container.tsx +++ b/src/mixed-line-bar-chart/chart-container.tsx @@ -77,8 +77,6 @@ export interface ChartContainerProps { ariaDescription: MixedLineBarChartProps['ariaDescription']; i18nStrings: MixedLineBarChartProps['i18nStrings']; - plotContainerRef: React.RefObject; - detailPopoverSeriesContent?: MixedLineBarChartProps.DetailPopoverSeriesContent; } @@ -129,7 +127,6 @@ export default function ChartContainer({ ariaLabelledby, ariaDescription, i18nStrings = {}, - plotContainerRef, detailPopoverSeriesContent, ...props }: ChartContainerProps) { @@ -401,11 +398,8 @@ export default function ChartContainer({ !(blurTarget instanceof Element) || !nodeBelongs(containerRefObject.current, blurTarget) ) { - setHighlightedPoint(null); + clearHighlightedSeries(); setVerticalMarkerX(null); - if (!plotContainerRef?.current?.contains(blurTarget)) { - clearHighlightedSeries(); - } if (isPopoverOpen && !isPopoverPinned) { dismissPopover(); diff --git a/src/mixed-line-bar-chart/internal.tsx b/src/mixed-line-bar-chart/internal.tsx index 53495186c3..bd4e1bbb67 100644 --- a/src/mixed-line-bar-chart/internal.tsx +++ b/src/mixed-line-bar-chart/internal.tsx @@ -279,7 +279,6 @@ export default function InternalMixedLineBarChart ) : null }