diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 30cfce3593..2fd30bf3ab 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -98,6 +98,7 @@ export function Outer({ }: React.PropsWithChildren<{ showCancel?: boolean style?: StyleProp + onCloseAutoFocus?: (event: Event) => void }>) { const context = useMenuContext() const {_} = useLingui() diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx index 80b3915d77..d89c5a2e71 100644 --- a/src/components/Menu/index.web.tsx +++ b/src/components/Menu/index.web.tsx @@ -181,9 +181,13 @@ export function Trigger({ export function Outer({ children, style, + onCloseAutoFocus, }: React.PropsWithChildren<{ showCancel?: boolean style?: StyleProp + 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"> ) : ( - + { + // 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() + } + }}> {['❤️', '👍', '😆', '👀', '😢'].map(emoji => { const alreadyReacted = hasAlreadyReacted( diff --git a/src/components/dms/MessageItem.tsx b/src/components/dms/MessageItem.tsx index 0216e0f3e7..49ae4ec7fa 100644 --- a/src/components/dms/MessageItem.tsx +++ b/src/components/dms/MessageItem.tsx @@ -217,6 +217,7 @@ let MessageItem = ({ const avatar = profile && moderationOpts ? (