fix: use portal to make sure ellipsis menu opens on top of note list

standardnotes · May 18, 2021 · e4d7023 · e4d7023
1 parent 350fc20
commit e4d7023
Showing 1 changed file with 26 additions and 21 deletions.
diff --git a/app/assets/javascripts/components/NotesOptionsPanel.tsx b/app/assets/javascripts/components/NotesOptionsPanel.tsx
@@ -6,6 +6,7 @@ import {
   DisclosureButton,
   DisclosurePanel,
 } from '@reach/disclosure';
+import { Portal } from '@reach/portal';
 import MoreIcon from '../../icons/ic-more.svg';
 import { useRef, useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
@@ -55,27 +56,31 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
         <VisuallyHidden>Actions</VisuallyHidden>
         <MoreIcon className="fill-current block" />
       </DisclosureButton>
-      <DisclosurePanel
-        onKeyUp={(event) => {
-          if (event.key === 'Escape' && !submenuOpen) {
-            setOpen(false);
-            buttonRef.current.focus();
-          }
-        }}
-        ref={panelRef}
-        style={{
-          ...position,
-        }}
-        className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2"
-      >
-        {open && (
-          <NotesOptions
-            appState={appState}
-            closeOnBlur={closeOnBlur}
-            onSubmenuChange={onSubmenuChange}
-          />
-        )}
-      </DisclosurePanel>
+      <Portal>
+        <div className="sn-component">
+          <DisclosurePanel
+            onKeyUp={(event) => {
+              if (event.key === 'Escape' && !submenuOpen) {
+                setOpen(false);
+                buttonRef.current.focus();
+              }
+            }}
+            ref={panelRef}
+            style={{
+              ...position,
+            }}
+            className="sn-dropdown flex flex-col py-2"
+          >
+            {open && (
+              <NotesOptions
+                appState={appState}
+                closeOnBlur={closeOnBlur}
+                onSubmenuChange={onSubmenuChange}
+              />
+            )}
+          </DisclosurePanel>
+        </div>
+      </Portal>
     </Disclosure>
   );
 });