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.
deephaven · Dec 8, 2023 · 6fa2204 · 6fa2204
1 parent 88bcae0
commit 6fa2204
Showing 1 changed file with 66 additions and 62 deletions.
diff --git 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>
   );
 }