fix: Chart detail popover should open when focus moves out and in aga…

…in (#1777)
cloudscape-design · Dec 29, 2023 · d35e94b · d35e94b
1 parent 6a6c6bf
commit d35e94b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
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
@@ -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
@@ -77,8 +77,6 @@ export interface ChartContainerProps<T extends ChartDataTypes> {
   ariaDescription: MixedLineBarChartProps<T>['ariaDescription'];
   i18nStrings: MixedLineBarChartProps<T>['i18nStrings'];
 
-  plotContainerRef: React.RefObject<HTMLDivElement>;
-
   detailPopoverSeriesContent?: MixedLineBarChartProps.DetailPopoverSeriesContent<T>;
 }
 
@@ -129,7 +127,6 @@ export default function ChartContainer<T extends ChartDataTypes>({
   ariaLabelledby,
   ariaDescription,
   i18nStrings = {},
-  plotContainerRef,
   detailPopoverSeriesContent,
   ...props
 }: ChartContainerProps<T>) {
@@ -401,11 +398,8 @@ export default function ChartContainer<T extends ChartDataTypes>({
       !(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
@@ -279,7 +279,6 @@ export default function InternalMixedLineBarChart<T extends number | string | Da
             ariaLabelledby={ariaLabelledby}
             ariaDescription={ariaDescription}
             i18nStrings={i18nStrings}
-            plotContainerRef={containerRef}
           />
         ) : null
       }