nikrozman/element-web
1
0
Fork 0
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Add FocusLock to emoji picker (#31146)

Browse Source 
* Add focus lock to emoji picker and e2e test.

* Remove direct use of FocusLock in favour of the ContextMenu prop.

* Apply returnFocus for ContextMenu focusLocks

* Remove import
This commit is contained in:
David Langley
2025-10-31 13:54:26 +00:00
committed by GitHub
parent 23f372ca08
commit e0a94a05ea
6 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/structures/ContextMenu.tsx
View File

@@ -405,7 +405,7 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
);
if (focusLock) {
body = <FocusLock>{body}</FocusLock>;
body = <FocusLock returnFocus>{body}</FocusLock>;
}
// filter props that are invalid for DOM elements

2
src/components/views/context_menus/MessageContextMenu.tsx
View File

@@ -735,7 +735,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
if (this.state.reactionPickerDisplayed) {
const buttonRect = (this.reactButtonRef.current as HTMLElement)?.getBoundingClientRect();
reactionPicker = (
<ContextMenu {...toRightOf(buttonRect)} onFinished={this.closeMenu} managed={false}>
<ContextMenu {...toRightOf(buttonRect)} onFinished={this.closeMenu} managed={false} focusLock>
<ReactionPicker mxEvent={mxEvent} onFinished={this.onCloseReactionPicker} reactions={reactions} />
</ContextMenu>
);

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

@@ -156,7 +156,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
if (menuDisplayed && buttonRef.current) {
const buttonRect = buttonRef.current.getBoundingClientRect();
contextMenu = (
<ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
<ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false} focusLock>
<ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
</ContextMenu>
);

2
src/components/views/messages/ReactionsRow.tsx
View File

@@ -34,7 +34,7 @@ const ReactButton: React.FC<IProps> = ({ mxEvent, reactions }) => {
if (menuDisplayed && button.current) {
const buttonRect = button.current.getBoundingClientRect();
contextMenu = (
<ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false}>
<ContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu} managed={false} focusLock>
<ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeMenu} />
</ContextMenu>
);

2
src/components/views/rooms/EmojiButton.tsx
View File

@@ -34,7 +34,7 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP
};
contextMenu = (
<ContextMenu {...position} onFinished={onFinished} managed={false}>
<ContextMenu {...position} onFinished={onFinished} managed={false} focusLock>
<EmojiPicker onChoose={addEmoji} onFinished={onFinished} />
</ContextMenu>
);