diff --git a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png index a4f6a476f66..df1a991e9a4 100644 Binary files a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png and b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png differ diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index 94a5d34d60d..f05fd58d82d 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -34,6 +34,7 @@ import { Action } from "../../dispatcher/actions"; import { type XOR } from "../../@types/common"; import ExtensionsCard from "../views/right_panel/ExtensionsCard"; import MemberListView from "../views/rooms/MemberList/MemberListView"; +import { _t } from "../../languageHandler"; interface BaseProps { overwriteCard?: IRightPanelCard; // used to display a custom card and ignoring the RightPanelStore (used for UserView) @@ -64,6 +65,7 @@ interface IState { export default class RightPanel extends React.Component { public static contextType = MatrixClientContext; declare public context: React.ContextType; + private ref = React.createRef(); public constructor(props: Props) { super(props); @@ -82,6 +84,7 @@ export default class RightPanel extends React.Component { public componentDidMount(): void { this.context.on(RoomStateEvent.Members, this.onRoomStateMember); RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate); + this.ref.current?.focus(); } public componentWillUnmount(): void { @@ -119,7 +122,13 @@ export default class RightPanel extends React.Component { }; private onRightPanelStoreUpdate = (): void => { - this.setState({ ...(RightPanel.getDerivedStateFromProps(this.props) as IState) }); + const oldPhase = this.state.phase; + const newState = RightPanel.getDerivedStateFromProps(this.props) as IState; + this.setState({ ...newState }); + + if (oldPhase !== newState.phase) { + this.ref.current?.focus(); + } }; private onClose = (): void => { @@ -282,7 +291,14 @@ export default class RightPanel extends React.Component { } return ( -