material-components/material-web
1
1
Fork 0
mirror of https://github.com/material-components/material-web.git synced 2024-08-17 09:30:27 +03:00
Code Issues Projects Releases Wiki Activity

fix(tabs): tabs.scrollToTab() not working

Browse Source 
Fixes #5385

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

PiperOrigin-RevId: 599221652
This commit is contained in:
Elizabeth Mitchell 2024-01-17 10:41:43 -08:00 committed by Copybara-Service
parent a3a05e4179
commit eb7c17e3dc
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
tabs/internal/tabs.ts
View File

@ -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() {
@ -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;
}
@ -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() {