OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

[Backport staging] Fix usages of useContextMenu which never pass the ref to the element (#9450) 

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
pull/28788/head^2
ElementRobot 2022-10-18 14:07:55 +01:00 committed by GitHub
parent 450ddbe2b0
commit 8fa1c2bf2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/views/messages/MessageActionBar.tsx
View File

@ -83,7 +83,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
getRelationsForEvent, getRelationsForEvent,
}) => { }) => {
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
const [onFocus, isActive, ref] = useRovingTabIndex(button); const [onFocus, isActive] = useRovingTabIndex(button);
useEffect(() => { useEffect(() => {
onFocusChange(menuDisplayed); onFocusChange(menuDisplayed);
}, [onFocusChange, menuDisplayed]); }, [onFocusChange, menuDisplayed]);
@ -123,7 +123,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
onClick={onOptionsClick} onClick={onOptionsClick}
onContextMenu={onOptionsClick} onContextMenu={onOptionsClick}
isExpanded={menuDisplayed} isExpanded={menuDisplayed}
inputRef={ref} inputRef={button}
onFocus={onFocus} onFocus={onFocus}
tabIndex={isActive ? 0 : -1} tabIndex={isActive ? 0 : -1}
> >
@ -141,7 +141,7 @@ interface IReactButtonProps {
const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusChange }) => { const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusChange }) => {
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu(); const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
const [onFocus, isActive, ref] = useRovingTabIndex(button); const [onFocus, isActive] = useRovingTabIndex(button);
useEffect(() => { useEffect(() => {
onFocusChange(menuDisplayed); onFocusChange(menuDisplayed);
}, [onFocusChange, menuDisplayed]); }, [onFocusChange, menuDisplayed]);
@ -173,7 +173,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
onClick={onClick} onClick={onClick}
onContextMenu={onClick} onContextMenu={onClick}
isExpanded={menuDisplayed} isExpanded={menuDisplayed}
inputRef={ref} inputRef={button}
onFocus={onFocus} onFocus={onFocus}
tabIndex={isActive ? 0 : -1} tabIndex={isActive ? 0 : -1}
> >

1
src/components/views/rooms/MessageComposerButtons.tsx
View File

@ -179,6 +179,7 @@ const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition }) =>
iconClassName="mx_MessageComposer_emoji" iconClassName="mx_MessageComposer_emoji"
onClick={openMenu} onClick={openMenu}
title={_t("Emoji")} title={_t("Emoji")}
inputRef={button}
/> />
{ contextMenu } { contextMenu }