PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix ScrollPanel data-scrollbar not responding to window resizing (#7841)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-18 13:03:16 +00:00 committed by GitHub
parent 6fccd6b183
commit 29c1c8d1e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/structures/AutoHideScrollbar.tsx
View file

@ -47,10 +47,6 @@ export default class AutoHideScrollbar extends React.Component<IProps> {
}
}
public getScrollTop(): number {
return this.containerRef.current.scrollTop;
}
public render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { className, onScroll, onWheel, style, tabIndex, wrappedRef, children, ...otherProps } = this.props;

19
src/components/structures/ScrollPanel.tsx
View file

@ -23,6 +23,7 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
import { getKeyBindingsManager } from "../../KeyBindingsManager";
import ResizeNotifier from "../../utils/ResizeNotifier";
import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
import UIStore, { UI_EVENTS } from "../../stores/UIStore";
const DEBUG_SCROLL = false;
@ -214,6 +215,8 @@ export default class ScrollPanel extends React.Component<IProps> {
componentDidMount() {
this.checkScroll();
UIStore.instance.on(UI_EVENTS.Resize, this.onUiResize);
}
componentDidUpdate() {
@ -236,6 +239,8 @@ export default class ScrollPanel extends React.Component<IProps> {
if (this.props.resizeNotifier) {
this.props.resizeNotifier.removeListener("middlePanelResizedNoisy", this.onResize);
}
UIStore.instance.off(UI_EVENTS.Resize, this.onUiResize);
}
private onScroll = ev => {
@ -730,6 +735,17 @@ export default class ScrollPanel extends React.Component<IProps> {
}
}
private onUiResize = () => {
this.setDataScrollbar();
};
private setDataScrollbar(contentHeight = this.getMessagesHeight()) {
const sn = this.getScrollNode();
const minHeight = sn.clientHeight;
const displayScrollbar = contentHeight > minHeight;
sn.dataset.scrollbar = displayScrollbar.toString();
}
// need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content?
private async updateHeight(): Promise<void> {
// wait until user has stopped scrolling
@ -751,8 +767,7 @@ export default class ScrollPanel extends React.Component<IProps> {
const minHeight = sn.clientHeight;
const height = Math.max(minHeight, contentHeight);
this.pages = Math.ceil(height / PAGE_SIZE);
const displayScrollbar = contentHeight > minHeight;
sn.dataset.scrollbar = displayScrollbar.toString();
this.setDataScrollbar(contentHeight);
this.bottomGrowth = 0;
const newHeight = `${this.getListHeight()}px`;