diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx index ed762b7b5..3f762c31b 100644 --- a/app/soapbox/features/status/index.tsx +++ b/app/soapbox/features/status/index.tsx @@ -496,15 +496,15 @@ class Status extends ImmutablePureComponent { const { status, ancestorsIds, descendantsIds } = this.props; if (id === status.id) { - this._selectChild(ancestorsIds.size - 1, true); + this._selectChild(ancestorsIds.size - 1); } else { let index = ImmutableList(ancestorsIds).indexOf(id); if (index === -1) { index = ImmutableList(descendantsIds).indexOf(id); - this._selectChild(ancestorsIds.size + index, true); + this._selectChild(ancestorsIds.size + index); } else { - this._selectChild(index - 1, true); + this._selectChild(index - 1); } } } @@ -513,15 +513,15 @@ class Status extends ImmutablePureComponent { const { status, ancestorsIds, descendantsIds } = this.props; if (id === status.id) { - this._selectChild(ancestorsIds.size + 1, false); + this._selectChild(ancestorsIds.size + 1); } else { let index = ImmutableList(ancestorsIds).indexOf(id); if (index === -1) { index = ImmutableList(descendantsIds).indexOf(id); - this._selectChild(ancestorsIds.size + index + 2, false); + this._selectChild(ancestorsIds.size + index + 2); } else { - this._selectChild(index + 1, false); + this._selectChild(index + 1); } } } @@ -544,19 +544,18 @@ class Status extends ImmutablePureComponent { firstEmoji?.focus(); }; - _selectChild(index: number, align_top: boolean) { - const container = this.node; - if (!container) return; - const element = container.querySelectorAll('.focusable')[index] as HTMLButtonElement; + _selectChild(index: number) { + this.scroller?.scrollIntoView({ + index, + behavior: 'smooth', + done: () => { + const element = document.querySelector(`#thread [data-index="${index}"] .focusable`); - if (element) { - if (align_top && container.scrollTop > element.offsetTop) { - element.scrollIntoView(true); - } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) { - element.scrollIntoView(false); - } - element.focus(); - } + if (element) { + element.focus(); + } + }, + }); } renderTombstone(id: string) { @@ -791,6 +790,7 @@ class Status extends ImmutablePureComponent {