diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 27e9240b20..2231618994 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -260,10 +260,11 @@ export default class ContextMenu extends React.PureComponent { const { windowWidth, windowHeight } = UIStore.instance; if (contextMenuRect) { if (position.top !== undefined) { - position.top = Math.min( - position.top, - windowHeight - contextMenuRect.height - WINDOW_PADDING, - ); + let maxTop = windowHeight - WINDOW_PADDING; + if (!this.props.bottomAligned) { + maxTop -= contextMenuRect.height; + } + position.top = Math.min(position.top, maxTop); // Adjust the chevron if necessary if (chevronOffset.top !== undefined) { chevronOffset.top = props.chevronOffset + props.top - position.top; @@ -278,10 +279,11 @@ export default class ContextMenu extends React.PureComponent { } } if (position.left !== undefined) { - position.left = Math.min( - position.left, - windowWidth - contextMenuRect.width - WINDOW_PADDING, - ); + let maxLeft = windowWidth - WINDOW_PADDING; + if (!this.props.rightAligned) { + maxLeft -= contextMenuRect.width; + } + position.left = Math.min(position.left, maxLeft); if (chevronOffset.left !== undefined) { chevronOffset.left = props.chevronOffset + props.left - position.left; } diff --git a/src/components/views/context_menus/ThreadListContextMenu.tsx b/src/components/views/context_menus/ThreadListContextMenu.tsx index 67d0396532..c2d560c0f7 100644 --- a/src/components/views/context_menus/ThreadListContextMenu.tsx +++ b/src/components/views/context_menus/ThreadListContextMenu.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { RefObject, useCallback, useEffect } from "react"; +import React, { useCallback, useEffect } from "react"; import { MatrixEvent } from "matrix-js-sdk/src"; import { ButtonEvent } from "../elements/AccessibleButton"; @@ -27,7 +27,6 @@ import { _t } from "../../../languageHandler"; import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu"; import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore"; import { MatrixClientPeg } from "../../../MatrixClientPeg"; -import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; interface IProps { @@ -36,13 +35,6 @@ interface IProps { onMenuToggle?: (open: boolean) => void; } -interface IExtendedProps extends IProps { - // Props for making the button into a roving one - tabIndex?: number; - inputRef?: RefObject; - onFocus?(): void; -} - const contextMenuBelow = (elementRect: DOMRect) => { // align the context menu's icons with the icon which opened the context menu const left = elementRect.left + window.pageXOffset + elementRect.width; @@ -51,27 +43,13 @@ const contextMenuBelow = (elementRect: DOMRect) => { return { left, top, chevronFace }; }; -export const RovingThreadListContextMenu: React.FC = (props) => { - const [onFocus, isActive, ref] = useRovingTabIndex(); - - return ; -}; - -const ThreadListContextMenu: React.FC = ({ +const ThreadListContextMenu: React.FC = ({ mxEvent, permalinkCreator, onMenuToggle, - onFocus, - inputRef, ...props }) => { - const [menuDisplayed, _ref, openMenu, closeThreadOptions] = useContextMenu(); - const button = inputRef ?? _ref; // prefer the ref we receive via props in case we are being controlled + const [menuDisplayed, button, openMenu, closeThreadOptions] = useContextMenu(); const viewInRoom = useCallback((evt: ButtonEvent): void => { evt.preventDefault(); @@ -95,11 +73,8 @@ const ThreadListContextMenu: React.FC = ({ }, [mxEvent, closeThreadOptions, permalinkCreator]); useEffect(() => { - if (onMenuToggle) { - onMenuToggle(menuDisplayed); - } - onFocus?.(); - }, [menuDisplayed, onMenuToggle, onFocus]); + onMenuToggle?.(menuDisplayed); + }, [menuDisplayed, onMenuToggle]); const isMainSplitTimelineShown = !WidgetLayoutStore.instance.hasMaximisedWidget( MatrixClientPeg.get().getRoom(mxEvent.getRoomId()),