diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 6d73cd30..5088e3aa 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -1,3 +1,4 @@ +import {Platform} from 'react-native' import {web, native} from '#/alf/util/platform' import * as tokens from '#/alf/tokens' @@ -6,7 +7,7 @@ export const atoms = { * Positioning */ fixed: { - position: 'fixed', + position: Platform.select({web: 'fixed', native: 'absolute'}) as 'absolute', }, absolute: { position: 'absolute', diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx index 47193bce..f4b03f68 100644 --- a/src/components/Menu/index.web.tsx +++ b/src/components/Menu/index.web.tsx @@ -3,6 +3,8 @@ import React from 'react' import {View, Pressable, ViewStyle, StyleProp} from 'react-native' import * as DropdownMenu from '@radix-ui/react-dropdown-menu' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import * as Dialog from '#/components/Dialog' import {useInteractionState} from '#/components/hooks/useInteractionState' @@ -19,6 +21,7 @@ import { RadixPassThroughTriggerProps, } from '#/components/Menu/types' import {Context} from '#/components/Menu/context' +import {Portal} from '#/components/Portal' export function useMenuControl(): Dialog.DialogControlProps { const id = React.useId() @@ -50,6 +53,7 @@ export function Root({ }: React.PropsWithChildren<{ control?: Dialog.DialogOuterProps['control'] }>) { + const {_} = useLingui() const defaultControl = useMenuControl() const context = React.useMemo( () => ({ @@ -70,6 +74,18 @@ export function Root({ return ( + {context.control.isOpen && ( + + context.control.close()} + accessibilityHint="" + accessibilityLabel={_( + msg`Context menu backdrop, click to close the menu.`, + )} + /> + + )}