rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-18 10:26:17 -03:00
parent 350fc20831
commit e4d70239f6
1 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/assets/javascripts/components/NotesOptionsPanel.tsx
View File

@@ -6,6 +6,7 @@ import {
DisclosureButton, DisclosureButton,
DisclosurePanel, DisclosurePanel,
} from '@reach/disclosure'; } from '@reach/disclosure';
import { Portal } from '@reach/portal';
import MoreIcon from '../../icons/ic-more.svg'; import MoreIcon from '../../icons/ic-more.svg';
import { useRef, useState } from 'preact/hooks'; import { useRef, useState } from 'preact/hooks';
import { observer } from 'mobx-react-lite'; import { observer } from 'mobx-react-lite';
@@ -55,6 +56,8 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
<VisuallyHidden>Actions</VisuallyHidden> <VisuallyHidden>Actions</VisuallyHidden>
<MoreIcon className="fill-current block" /> <MoreIcon className="fill-current block" />
</DisclosureButton> </DisclosureButton>
<Portal>
<div className="sn-component">
<DisclosurePanel <DisclosurePanel
onKeyUp={(event) => { onKeyUp={(event) => {
if (event.key === 'Escape' && !submenuOpen) { if (event.key === 'Escape' && !submenuOpen) {
@@ -66,7 +69,7 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
style={{ style={{
...position, ...position,
}} }}
className="sn-dropdown sn-dropdown-anchor-right flex flex-col py-2" className="sn-dropdown flex flex-col py-2"
> >
{open && ( {open && (
<NotesOptions <NotesOptions
@@ -76,6 +79,8 @@ export const NotesOptionsPanel = observer(({ appState }: Props) => {
/> />
)} )}
</DisclosurePanel> </DisclosurePanel>
</div>
</Portal>
</Disclosure> </Disclosure>
); );
}); });