Skip to content

Commit 6fa2204

Browse files
dsmmckendsmmcken
authored
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.
1 parent 88bcae0 commit 6fa2204

1 file changed

Lines changed: 66 additions & 62 deletions

File tree

‎packages/code-studio/src/styleguide/StyleGuide.tsx‎

Lines changed: 66 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -45,78 +45,82 @@ function StyleGuide(): React.ReactElement {
4545
const hasMultipleThemes = themes.length > 1;
4646

4747
return (
48-
<div className="container style-guide-container">
49-
{/* For e2e tests this allows us to isolate sections for snapshots. This
48+
// Needs a tabindex to capture focus on popper blur
49+
// AppMainContainer has a tabindex of -1 in the app itself
50+
<div tabIndex={-1} role="main">
51+
<div className="container style-guide-container">
52+
{/* For e2e tests this allows us to isolate sections for snapshots. This
5053
mitigates an issue where a change to a section in the styleguide can cause
5154
subtle pixel shifts in other sections */}
52-
{isolateSection && (
53-
<style>
54-
{`.${HIDE_FROM_E2E_TESTS_CLASS}, .sample-section:not(${window.location.hash}), :not(.sample-section) > h2 {
55+
{isolateSection && (
56+
<style>
57+
{`.${HIDE_FROM_E2E_TESTS_CLASS}, .sample-section:not(${window.location.hash}), :not(.sample-section) > h2 {
5558
display: none;
5659
}`}
57-
</style>
58-
)}
59-
<Flex
60-
justifyContent="space-between"
61-
alignItems="center"
62-
marginTop="2rem"
63-
marginBottom="1rem"
64-
>
65-
<h1 style={{ paddingTop: '2rem' }}>Deephaven UI Components</h1>
66-
</Flex>
60+
</style>
61+
)}
62+
<Flex
63+
justifyContent="space-between"
64+
alignItems="center"
65+
marginTop="2rem"
66+
marginBottom="1rem"
67+
>
68+
<h1 style={{ paddingTop: '2rem' }}>Deephaven UI Components</h1>
69+
</Flex>
6770

68-
<Flex
69-
{...stickyProps}
70-
UNSAFE_className={HIDE_FROM_E2E_TESTS_CLASS}
71-
marginTop={-56}
72-
top={20}
73-
gap={10}
74-
alignItems="end"
75-
>
76-
{hasMultipleThemes ? <ThemePicker /> : null}
77-
<SamplesMenu />
78-
</Flex>
79-
<Flex
80-
{...stickyProps}
81-
UNSAFE_className={HIDE_FROM_E2E_TESTS_CLASS}
82-
top="calc(100vh - 40px)"
83-
marginTop={-32}
84-
marginEnd={hasMultipleThemes ? -234 : 0}
85-
>
86-
<GotoTopButton />
87-
</Flex>
71+
<Flex
72+
{...stickyProps}
73+
UNSAFE_className={HIDE_FROM_E2E_TESTS_CLASS}
74+
marginTop={-56}
75+
top={20}
76+
gap={10}
77+
alignItems="end"
78+
>
79+
{hasMultipleThemes ? <ThemePicker /> : null}
80+
<SamplesMenu />
81+
</Flex>
82+
<Flex
83+
{...stickyProps}
84+
UNSAFE_className={HIDE_FROM_E2E_TESTS_CLASS}
85+
top="calc(100vh - 40px)"
86+
marginTop={-32}
87+
marginEnd={hasMultipleThemes ? -234 : 0}
88+
>
89+
<GotoTopButton />
90+
</Flex>
8891

89-
<Typograpy />
92+
<Typograpy />
9093

91-
<SampleMenuCategory data-menu-category="Colors" />
92-
<Colors />
93-
<ThemeColors />
94+
<SampleMenuCategory data-menu-category="Colors" />
95+
<Colors />
96+
<ThemeColors />
9497

95-
<SampleMenuCategory data-menu-category="Layout" />
96-
<GoldenLayout />
98+
<SampleMenuCategory data-menu-category="Layout" />
99+
<GoldenLayout />
97100

98-
<SampleMenuCategory data-menu-category="Components" />
99-
<Buttons />
100-
<Progress />
101-
<Inputs />
102-
<ItemListInputs />
103-
<DraggableLists />
104-
<TimeSliderInputs />
105-
<Dialog />
106-
<Modals />
107-
<ContextMenus />
108-
<DropdownMenus />
109-
<Navigations />
110-
<Tooltips />
111-
<Icons />
112-
<Editors />
113-
<Grids />
114-
<Charts />
115-
<ContextMenuRoot />
116-
<RandomAreaPlotAnimation />
101+
<SampleMenuCategory data-menu-category="Components" />
102+
<Buttons />
103+
<Progress />
104+
<Inputs />
105+
<ItemListInputs />
106+
<DraggableLists />
107+
<TimeSliderInputs />
108+
<Dialog />
109+
<Modals />
110+
<ContextMenus />
111+
<DropdownMenus />
112+
<Navigations />
113+
<Tooltips />
114+
<Icons />
115+
<Editors />
116+
<Grids />
117+
<Charts />
118+
<ContextMenuRoot />
119+
<RandomAreaPlotAnimation />
117120

118-
<SampleMenuCategory data-menu-category="Spectrum Components" />
119-
<SpectrumComponents />
121+
<SampleMenuCategory data-menu-category="Spectrum Components" />
122+
<SpectrumComponents />
123+
</div>
120124
</div>
121125
);
122126
}

0 commit comments

Comments
 (0)
⚡