forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix dropdown close via a portaled backdrop (#3191)
authored by
Eric Bailey
and committed by
GitHub
202adb6d
5c771050
+18
-1
+2
-1
src/alf/atoms.ts
+2
-1
src/alf/atoms.ts
···
1
+
import {Platform} from 'react-native'
1
2
import {web, native} from '#/alf/util/platform'
2
3
import * as tokens from '#/alf/tokens'
3
4
···
6
7
* Positioning
7
8
*/
8
9
fixed: {
9
-
position: 'fixed',
10
+
position: Platform.select({web: 'fixed', native: 'absolute'}) as 'absolute',
10
11
},
11
12
absolute: {
12
13
position: 'absolute',
+16
src/components/Menu/index.web.tsx
+16
src/components/Menu/index.web.tsx
···
3
3
import React from 'react'
4
4
import {View, Pressable, ViewStyle, StyleProp} from 'react-native'
5
5
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
6
+
import {msg} from '@lingui/macro'
7
+
import {useLingui} from '@lingui/react'
6
8
7
9
import * as Dialog from '#/components/Dialog'
8
10
import {useInteractionState} from '#/components/hooks/useInteractionState'
···
19
21
RadixPassThroughTriggerProps,
20
22
} from '#/components/Menu/types'
21
23
import {Context} from '#/components/Menu/context'
24
+
import {Portal} from '#/components/Portal'
22
25
23
26
export function useMenuControl(): Dialog.DialogControlProps {
24
27
const id = React.useId()
···
50
53
}: React.PropsWithChildren<{
51
54
control?: Dialog.DialogOuterProps['control']
52
55
}>) {
56
+
const {_} = useLingui()
53
57
const defaultControl = useMenuControl()
54
58
const context = React.useMemo<ContextType>(
55
59
() => ({
···
70
74
71
75
return (
72
76
<Context.Provider value={context}>
77
+
{context.control.isOpen && (
78
+
<Portal>
79
+
<Pressable
80
+
style={[a.fixed, a.inset_0, a.z_50]}
81
+
onPress={() => context.control.close()}
82
+
accessibilityHint=""
83
+
accessibilityLabel={_(
84
+
msg`Context menu backdrop, click to close the menu.`,
85
+
)}
86
+
/>
87
+
</Portal>
88
+
)}
73
89
<DropdownMenu.Root
74
90
open={context.control.isOpen}
75
91
onOpenChange={onOpenChange}>