Fix dropdown immediately closing on Enter (#3745)
* Move dropdown content into separate component * Fix dropdown with keyboard * No-op is sufficient
This commit is contained in:
parent
1dd3d6657c
commit
2a08931127
2 changed files with 111 additions and 76 deletions
|
@ -1,27 +1,26 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
|
||||
import React from 'react'
|
||||
import {View, Pressable, ViewStyle, StyleProp} from 'react-native'
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
||||
import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
|
||||
import {msg} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
|
||||
|
||||
import {atoms as a, flatten, useTheme, web} from '#/alf'
|
||||
import * as Dialog from '#/components/Dialog'
|
||||
import {useInteractionState} from '#/components/hooks/useInteractionState'
|
||||
import {atoms as a, useTheme, flatten, web} from '#/alf'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
import {Context} from '#/components/Menu/context'
|
||||
import {
|
||||
ContextType,
|
||||
TriggerProps,
|
||||
ItemProps,
|
||||
GroupProps,
|
||||
ItemTextProps,
|
||||
ItemIconProps,
|
||||
ItemProps,
|
||||
ItemTextProps,
|
||||
RadixPassThroughTriggerProps,
|
||||
TriggerProps,
|
||||
} from '#/components/Menu/types'
|
||||
import {Context} from '#/components/Menu/context'
|
||||
import {Portal} from '#/components/Portal'
|
||||
import {Text} from '#/components/Typography'
|
||||
|
||||
export function useMenuControl(): Dialog.DialogControlProps {
|
||||
const id = React.useId()
|
||||
|
@ -135,10 +134,22 @@ export function Trigger({children, label}: TriggerProps) {
|
|||
},
|
||||
props: {
|
||||
...props,
|
||||
// disable on web, use `onPress`
|
||||
onPointerDown: () => false,
|
||||
onPress: () =>
|
||||
control.isOpen ? control.close() : control.open(),
|
||||
// No-op override to prevent false positive that interprets mobile scroll as a tap.
|
||||
// This requires the custom onPress handler below to compensate.
|
||||
// https://github.com/radix-ui/primitives/issues/1912
|
||||
onPointerDown: undefined,
|
||||
onPress: () => {
|
||||
if (window.event instanceof KeyboardEvent) {
|
||||
// The onPointerDown hack above is not relevant to this press, so don't do anything.
|
||||
return
|
||||
}
|
||||
// Compensate for the disabled onPointerDown above by triggering it manually.
|
||||
if (control.isOpen) {
|
||||
control.close()
|
||||
} else {
|
||||
control.open()
|
||||
}
|
||||
},
|
||||
onFocus: onFocus,
|
||||
onBlur: onBlur,
|
||||
onMouseEnter,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue