Doist · henningmu · Dec 2, 2020 · Dec 1, 2020 · Dec 1, 2020
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+## v7.1.9
+
+-   [Fix] We're only rendering menu lists into the DOM when the menu is opened. This should result in measurable performance gains if you're rendering a lot menus (e.g. as part of a list).
+
 ## v7.1.8
 
 -   [Tweak] Upgraded Reakit dependency

diff --git a/docs/iframe.html b/docs/iframe.html
@@ -71,4 +71,4 @@
   }</script><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
-      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.b0dd685095dcfdd46b60.bundle.js"></script><script src="vendors~main.b0dd685095dcfdd46b60.bundle.js"></script><script src="main.b0dd685095dcfdd46b60.bundle.js"></script></body></html>
+      }</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.2b6c7973ac2f266c7c5d.bundle.js"></script><script src="vendors~main.2b6c7973ac2f266c7c5d.bundle.js"></script><script src="main.2b6c7973ac2f266c7c5d.bundle.js"></script></body></html>
diff --git a/docs/main.b0dd685095dcfdd46b60.bundle.js → docs/main.2b6c7973ac2f266c7c5d.bundle.js b/docs/main.b0dd685095dcfdd46b60.bundle.js → docs/main.2b6c7973ac2f266c7c5d.bundle.js
diff --git a/docs/main.2b6c7973ac2f266c7c5d.bundle.js.map b/docs/main.2b6c7973ac2f266c7c5d.bundle.js.map
diff --git a/docs/main.b0dd685095dcfdd46b60.bundle.js.map b/docs/main.b0dd685095dcfdd46b60.bundle.js.map
diff --git a/...ntime~main.b0dd685095dcfdd46b60.bundle.js → ...ntime~main.2b6c7973ac2f266c7c5d.bundle.js b/...ntime~main.b0dd685095dcfdd46b60.bundle.js → ...ntime~main.2b6c7973ac2f266c7c5d.bundle.js
diff --git a/docs/runtime~main.2b6c7973ac2f266c7c5d.bundle.js.map b/docs/runtime~main.2b6c7973ac2f266c7c5d.bundle.js.map
diff --git a/docs/runtime~main.b0dd685095dcfdd46b60.bundle.js.map b/docs/runtime~main.b0dd685095dcfdd46b60.bundle.js.map
diff --git a/...ndors~main.b0dd685095dcfdd46b60.bundle.js → ...ndors~main.2b6c7973ac2f266c7c5d.bundle.js b/...ndors~main.b0dd685095dcfdd46b60.bundle.js → ...ndors~main.2b6c7973ac2f266c7c5d.bundle.js
diff --git a/...0dd685095dcfdd46b60.bundle.js.LICENSE.txt → ...b6c7973ac2f266c7c5d.bundle.js.LICENSE.txt b/...0dd685095dcfdd46b60.bundle.js.LICENSE.txt → ...b6c7973ac2f266c7c5d.bundle.js.LICENSE.txt
diff --git a/docs/vendors~main.2b6c7973ac2f266c7c5d.bundle.js.map b/docs/vendors~main.2b6c7973ac2f266c7c5d.bundle.js.map
diff --git a/docs/vendors~main.b0dd685095dcfdd46b60.bundle.js.map b/docs/vendors~main.b0dd685095dcfdd46b60.bundle.js.map
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "@doist/reactist",
     "description": "Open source React components by Doist",
     "author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
-    "version": "7.1.8",
+    "version": "7.1.9",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": "git+https://github.com/Doist/reactist.git",

diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
@@ -146,7 +146,7 @@ function MenuBackdrop({
  */
 const MenuList = forwardRefWithAs<'div'>(function MenuList({ className, ...props }, ref) {
     const { handleItemSelect, ...state } = React.useContext(MenuContext)
-    return (
+    return state.visible ? (
         <MenuBackdrop {...state}>
             <Reakit.Menu
                 {...props}
@@ -155,7 +155,7 @@ const MenuList = forwardRefWithAs<'div'>(function MenuList({ className, ...props
                 className={classNames('reactist_menulist', className)}
             />
         </MenuBackdrop>
-    )
+    ) : null
 })
 
 //

diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx
@@ -19,14 +19,16 @@ it('renders a button that opens and closes the menu when clicked', () => {
             </MenuList>
         </Menu>,
     )
-    expect(screen.queryByRole('menu')).not.toBeInTheDocument()
-    expect(screen.queryByRole('menuitem')).not.toBeInTheDocument()
+
+    // querying by role doesn't work in this case as the menu and menuitem could
+    // still be added to the document but as children of a hidden element. To
+    // really make sure they're not in the DOM we're querying by text here
+    expect(screen.queryByText('First option')).not.toBeInTheDocument()
     userEvent.click(screen.getByRole('button', { name: 'Options menu' }))
     expect(screen.getByRole('menu')).toBeInTheDocument()
     expect(screen.getByRole('menuitem', { name: 'First option' })).toBeInTheDocument()
     userEvent.click(screen.getByRole('button', { name: 'Options menu' }))
-    expect(screen.queryByRole('menu')).not.toBeInTheDocument()
-    expect(screen.queryByRole('menuitem')).not.toBeInTheDocument()
+    expect(screen.queryByText('First option')).not.toBeInTheDocument()
 })
 
 it('closes the menu when a menu item is selected (unless the onSelect handler returns false or hideOnSelect is false)', () => {