diff --git a/pkg/interface/src/logic/lib/useOutsideClick.ts b/pkg/interface/src/logic/lib/useOutsideClick.ts index f8b7c41387..d43636967d 100644 --- a/pkg/interface/src/logic/lib/useOutsideClick.ts +++ b/pkg/interface/src/logic/lib/useOutsideClick.ts @@ -2,14 +2,15 @@ import { useEffect, RefObject } from "react"; export function useOutsideClick( ref: RefObject<HTMLElement | null | undefined>, - onClick: () => void + onClick: () => void, ) { useEffect(() => { function handleClick(event: MouseEvent) { + const portalRoot = document.querySelector('#portal-root')!; if ( ref.current && !ref.current.contains(event.target as any) && - !document.querySelector("#portal-root")!.contains(event.target as any) + (!portalRoot.contains(ref.current) || portalRoot.contains(event.target as any)) ) { onClick(); } diff --git a/pkg/interface/src/views/apps/notifications/graph.tsx b/pkg/interface/src/views/apps/notifications/graph.tsx index 4659577977..7517b0b505 100644 --- a/pkg/interface/src/views/apps/notifications/graph.tsx +++ b/pkg/interface/src/views/apps/notifications/graph.tsx @@ -129,6 +129,8 @@ const GraphNodeContent = ({ group, post, contacts, mod, description, index, remo measure={() => {}} group={group} contacts={contacts} + groups={{}} + associations={{ graph: {}, groups: {}}} msg={post} fontSize='0' pt='2' diff --git a/pkg/interface/src/views/components/leap/Omnibox.tsx b/pkg/interface/src/views/components/leap/Omnibox.tsx index 45233b8df5..24385f6137 100644 --- a/pkg/interface/src/views/components/leap/Omnibox.tsx +++ b/pkg/interface/src/views/components/leap/Omnibox.tsx @@ -12,6 +12,7 @@ import { deSig } from '~/logic/lib/util'; import defaultApps from '~/logic/lib/default-apps'; import {Associations, Contacts, Groups, Tile, Invites} from '~/types'; import {useOutsideClick} from '~/logic/lib/useOutsideClick'; +import {Portal} from '../Portal'; interface OmniboxProps { associations: Associations; @@ -263,7 +264,8 @@ export function Omnibox(props: OmniboxProps) { </Box>; }, [results, navigate, selected, props.contacts, props.notifications, props.invites]); - return ( + return ( + <Portal> <Box backgroundColor='scales.black30' width='100%' @@ -271,7 +273,7 @@ export function Omnibox(props: OmniboxProps) { position='absolute' top='0' right='0' - zIndex='9' + zIndex={11} display={props.show ? 'block' : 'none'}> <Row justifyContent='center'> <Box @@ -292,6 +294,7 @@ export function Omnibox(props: OmniboxProps) { </Box> </Row> </Box> + </Portal> ); }