From 6fa22046b0a327c8a1a6c5ab851cc064ae400bf8 Mon Sep 17 00:00:00 2001
From: Don <donmckenzie@deephaven.io>
Date: Fri, 8 Dec 2023 17:37:37 -0500
Subject: [PATCH] fix: popper blur in styleguide (#1672)

Poppers such as menu dropdowns aren't closing in the styleguide on
outside clicks, this is because no element has focus on the outside
click, as e.relatedTarget was null. The main app doens't have this
problem since tabindex=-1 is on the appmaincontainer. Add a wrapper
(that includes the side marigins) to have a -1 tabindex.
---
 .../code-studio/src/styleguide/StyleGuide.tsx | 128 +++++++++---------
 1 file changed, 66 insertions(+), 62 deletions(-)

diff --git a/packages/code-studio/src/styleguide/StyleGuide.tsx b/packages/code-studio/src/styleguide/StyleGuide.tsx
index d2c26b53c0..6ba9e9ef99 100644
--- a/packages/code-studio/src/styleguide/StyleGuide.tsx
+++ b/packages/code-studio/src/styleguide/StyleGuide.tsx
@@ -45,78 +45,82 @@ function StyleGuide(): React.ReactElement {
   const hasMultipleThemes = themes.length > 1;
 
   return (
-    <div className="container style-guide-container">
-      {/* For e2e tests this allows us to isolate sections for snapshots. This 
+    // Needs a tabindex to capture focus on popper blur
+    // AppMainContainer has a tabindex of -1 in the app itself
+    <div tabIndex={-1} role="main">
+      <div className="container style-guide-container">
+        {/* For e2e tests this allows us to isolate sections for snapshots. This 
       mitigates an issue where a change to a section in the styleguide can cause
       subtle pixel shifts in other sections */}
-      {isolateSection && (
-        <style>
-          {`.${HIDE_FROM_E2E_TESTS_CLASS}, .sample-section:not(${window.location.hash}), :not(.sample-section) > h2 {
+        {isolateSection && (
+          <style>
+            {`.${HIDE_FROM_E2E_TESTS_CLASS}, .sample-section:not(${window.location.hash}), :not(.sample-section) > h2 {
           display: none;
         }`}
-        </style>
-      )}
-      <Flex
-        justifyContent="space-between"
-        alignItems="center"
-        marginTop="2rem"
-        marginBottom="1rem"
-      >
-        <h1 style={{ paddingTop: '2rem' }}>Deephaven UI Components</h1>
-      </Flex>
+          </style>
+        )}
+        <Flex
+          justifyContent="space-between"
+          alignItems="center"
+          marginTop="2rem"
+          marginBottom="1rem"
+        >
+          <h1 style={{ paddingTop: '2rem' }}>Deephaven UI Components</h1>
+        </Flex>
 
-      <Flex
-        {...stickyProps}
-        UNSAFE_className={HIDE_FROM_E2E_TESTS_CLASS}
-        marginTop={-56}
-        top={20}
-        gap={10}
-        alignItems="end"
-      >
-        {hasMultipleThemes ? <ThemePicker /> : null}
-        <SamplesMenu />
-      </Flex>
-      <Flex
-        {...stickyProps}
-        UNSAFE_className={HIDE_FROM_E2E_TESTS_CLASS}
-        top="calc(100vh - 40px)"
-        marginTop={-32}
-        marginEnd={hasMultipleThemes ? -234 : 0}
-      >
-        <GotoTopButton />
-      </Flex>
+        <Flex
+          {...stickyProps}
+          UNSAFE_className={HIDE_FROM_E2E_TESTS_CLASS}
+          marginTop={-56}
+          top={20}
+          gap={10}
+          alignItems="end"
+        >
+          {hasMultipleThemes ? <ThemePicker /> : null}
+          <SamplesMenu />
+        </Flex>
+        <Flex
+          {...stickyProps}
+          UNSAFE_className={HIDE_FROM_E2E_TESTS_CLASS}
+          top="calc(100vh - 40px)"
+          marginTop={-32}
+          marginEnd={hasMultipleThemes ? -234 : 0}
+        >
+          <GotoTopButton />
+        </Flex>
 
-      <Typograpy />
+        <Typograpy />
 
-      <SampleMenuCategory data-menu-category="Colors" />
-      <Colors />
-      <ThemeColors />
+        <SampleMenuCategory data-menu-category="Colors" />
+        <Colors />
+        <ThemeColors />
 
-      <SampleMenuCategory data-menu-category="Layout" />
-      <GoldenLayout />
+        <SampleMenuCategory data-menu-category="Layout" />
+        <GoldenLayout />
 
-      <SampleMenuCategory data-menu-category="Components" />
-      <Buttons />
-      <Progress />
-      <Inputs />
-      <ItemListInputs />
-      <DraggableLists />
-      <TimeSliderInputs />
-      <Dialog />
-      <Modals />
-      <ContextMenus />
-      <DropdownMenus />
-      <Navigations />
-      <Tooltips />
-      <Icons />
-      <Editors />
-      <Grids />
-      <Charts />
-      <ContextMenuRoot />
-      <RandomAreaPlotAnimation />
+        <SampleMenuCategory data-menu-category="Components" />
+        <Buttons />
+        <Progress />
+        <Inputs />
+        <ItemListInputs />
+        <DraggableLists />
+        <TimeSliderInputs />
+        <Dialog />
+        <Modals />
+        <ContextMenus />
+        <DropdownMenus />
+        <Navigations />
+        <Tooltips />
+        <Icons />
+        <Editors />
+        <Grids />
+        <Charts />
+        <ContextMenuRoot />
+        <RandomAreaPlotAnimation />
 
-      <SampleMenuCategory data-menu-category="Spectrum Components" />
-      <SpectrumComponents />
+        <SampleMenuCategory data-menu-category="Spectrum Components" />
+        <SpectrumComponents />
+      </div>
     </div>
   );
 }