diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx index 8626944895..5249f4ddd2 100644 --- a/src/components/structures/LoggedInView.tsx +++ b/src/components/structures/LoggedInView.tsx @@ -191,14 +191,30 @@ class LoggedInView extends React.Component { SettingsStore.watchSetting("userTimezone", null, this.onTimezoneUpdate), ]; - this.resizer = this.createResizer(); - this.resizer.attach(); + this.loadResizer(); OwnProfileStore.instance.on(UPDATE_EVENT, this.refreshBackgroundImage); - this.loadResizerPreferences(); this.refreshBackgroundImage(); } + /** + * Load or reload the resizer for the left panel + */ + private loadResizer(): void { + // If the resizer already exists, detach it first + this.resizer?.detach(); + + this.resizer = this.createResizer(); + this.resizer.attach(); + this.loadResizerPreferences(); + } + + public componentDidUpdate(nextProps: Readonly, nextState: Readonly, nextContext: any): void { + if (nextProps.page_type !== this.props.page_type) { + this.loadResizer(); + } + } + private onTimezoneUpdate = async (): Promise => { // TODO: In a future app release, remove support for legacy key. if (!SettingsStore.getValue("userTimezonePublish")) { diff --git a/test/unit-tests/components/structures/LoggedInView-test.tsx b/test/unit-tests/components/structures/LoggedInView-test.tsx index 1bbbd5b6d3..5b59c18bc1 100644 --- a/test/unit-tests/components/structures/LoggedInView-test.tsx +++ b/test/unit-tests/components/structures/LoggedInView-test.tsx @@ -584,4 +584,34 @@ describe("", () => { expect(window.localStorage.getItem("mx_lhs_size")).toBe("224"); }); }); + + describe("create a new resizer when page_type changes", () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it("should call loadResizer when page_type changes", () => { + const component = getComponent({ page_type: "room" }); + + // Re-render with different page_type + component.rerender(); + + // Verify that detach was called (from loadResizer) + expect(mockResizerInstance.detach).toHaveBeenCalledTimes(1); + // Verify that attach was called (from loadResizer) + // 1 (when page_type = "room") + 1 (when page_type = "home") + expect(mockResizerInstance.attach).toHaveBeenCalledTimes(2); + }); + + it("should not call loadResizer when page_type remains the same", () => { + const component = getComponent({ page_type: "room" }); + + // Re-render with same page_type but different other props + component.rerender(); + + // Verify that resizer methods were not called + expect(mockResizerInstance.detach).not.toHaveBeenCalled(); + expect(mockResizerInstance.attach).toHaveBeenCalledTimes(1); + }); + }); });