Skip to content

Commit

Permalink
fix(tabs): tabs.scrollToTab() not working
Browse files Browse the repository at this point in the history
Fixes #5385

The thing that scrolls is an internal element, not the host element.

PiperOrigin-RevId: 599221652
  • Loading branch information
asyncLiz authored and Copybara-Service committed Jan 17, 2024
1 parent a3a05e4 commit eb7c17e
Showing 1 changed file with 7 additions and 2 deletions.
9 changes: 7 additions & 2 deletions tabs/internal/tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ export class Tabs extends LitElement {
*/
@property({type: Boolean, attribute: 'auto-activate'}) autoActivate = false;

@query('.tabs') private readonly tabsScrollerElement!: HTMLElement | null;
@query('slot') private readonly slotElement!: HTMLSlotElement | null;

private get focusedTab() {
Expand Down Expand Up @@ -134,7 +135,11 @@ export class Tabs extends LitElement {
await this.updateComplete;
const {tabs} = this;
tabToScrollTo ??= this.activeTab;
if (!tabToScrollTo || !tabs.includes(tabToScrollTo)) {
if (
!tabToScrollTo ||
!tabs.includes(tabToScrollTo) ||
!this.tabsScrollerElement
) {
return;
}

Expand All @@ -153,7 +158,7 @@ export class Tabs extends LitElement {
const to = Math.min(min, Math.max(max, scroll));
// TODO(b/299934312): improve focus smoothness
const behavior: ScrollBehavior = !this.focusedTab ? 'smooth' : 'instant';
this.scrollTo({behavior, top: 0, left: to});
this.tabsScrollerElement.scrollTo({behavior, top: 0, left: to});
}

protected override render() {
Expand Down

0 comments on commit eb7c17e

Please sign in to comment.