Fix autofocusing Emoji reaction picker search
This commit is contained in:
@@ -98,6 +98,7 @@ export function Outer({
|
||||
}: React.PropsWithChildren<{
|
||||
showCancel?: boolean
|
||||
style?: StyleProp<ViewStyle>
|
||||
onCloseAutoFocus?: (event: Event) => void
|
||||
}>) {
|
||||
const context = useMenuContext()
|
||||
const {_} = useLingui()
|
||||
|
||||
@@ -181,9 +181,13 @@ export function Trigger({
|
||||
export function Outer({
|
||||
children,
|
||||
style,
|
||||
onCloseAutoFocus,
|
||||
}: React.PropsWithChildren<{
|
||||
showCancel?: boolean
|
||||
style?: StyleProp<ViewStyle>
|
||||
onCloseAutoFocus?: React.ComponentProps<
|
||||
typeof DropdownMenu.Content
|
||||
>['onCloseAutoFocus']
|
||||
}>) {
|
||||
const t = useTheme()
|
||||
const {reduceMotionEnabled} = useA11y()
|
||||
@@ -195,6 +199,7 @@ export function Outer({
|
||||
collisionPadding={{left: 5, right: 5, bottom: 5}}
|
||||
loop
|
||||
aria-label="Test"
|
||||
onCloseAutoFocus={onCloseAutoFocus}
|
||||
className="dropdown-menu-transform-origin dropdown-menu-constrain-size">
|
||||
<View
|
||||
style={[
|
||||
|
||||
@@ -68,7 +68,19 @@ function MenuInner({
|
||||
return expanded ? (
|
||||
<EmojiPicker.Picker keepOpenWhenShiftHeld={false} />
|
||||
) : (
|
||||
<Menu.Outer style={[a.rounded_full]}>
|
||||
<Menu.Outer
|
||||
style={[a.rounded_full]}
|
||||
onCloseAutoFocus={evt => {
|
||||
// If something has already taken focus (e.g. emoji-mart's search
|
||||
// input when swapping to the full picker), don't let Radix restore
|
||||
// focus to the trigger and steal it back.
|
||||
if (
|
||||
document.activeElement &&
|
||||
document.activeElement !== document.body
|
||||
) {
|
||||
evt.preventDefault()
|
||||
}
|
||||
}}>
|
||||
<View style={[a.flex_row, a.gap_xs]}>
|
||||
{['❤️', '👍', '😆', '👀', '😢'].map(emoji => {
|
||||
const alreadyReacted = hasAlreadyReacted(
|
||||
|
||||
@@ -217,6 +217,7 @@ let MessageItem = ({
|
||||
const avatar =
|
||||
profile && moderationOpts ? (
|
||||
<Link
|
||||
style={[a.rounded_full]}
|
||||
label={l`${createSanitizedDisplayName(profile)}’s avatar`}
|
||||
accessibilityHint={l`Opens this profile`}
|
||||
to={makeProfileLink({
|
||||
|
||||
Reference in New Issue
Block a user