mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(tabs): tabs.scrollToTab()
not working
Fixes #5385 The thing that scrolls is an internal element, not the host element. PiperOrigin-RevId: 599221652
This commit is contained in:
parent
a3a05e4179
commit
eb7c17e3dc
@ -102,6 +102,7 @@ export class Tabs extends LitElement {
|
|||||||
*/
|
*/
|
||||||
@property({type: Boolean, attribute: 'auto-activate'}) autoActivate = false;
|
@property({type: Boolean, attribute: 'auto-activate'}) autoActivate = false;
|
||||||
|
|
||||||
|
@query('.tabs') private readonly tabsScrollerElement!: HTMLElement | null;
|
||||||
@query('slot') private readonly slotElement!: HTMLSlotElement | null;
|
@query('slot') private readonly slotElement!: HTMLSlotElement | null;
|
||||||
|
|
||||||
private get focusedTab() {
|
private get focusedTab() {
|
||||||
@ -134,7 +135,11 @@ export class Tabs extends LitElement {
|
|||||||
await this.updateComplete;
|
await this.updateComplete;
|
||||||
const {tabs} = this;
|
const {tabs} = this;
|
||||||
tabToScrollTo ??= this.activeTab;
|
tabToScrollTo ??= this.activeTab;
|
||||||
if (!tabToScrollTo || !tabs.includes(tabToScrollTo)) {
|
if (
|
||||||
|
!tabToScrollTo ||
|
||||||
|
!tabs.includes(tabToScrollTo) ||
|
||||||
|
!this.tabsScrollerElement
|
||||||
|
) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -153,7 +158,7 @@ export class Tabs extends LitElement {
|
|||||||
const to = Math.min(min, Math.max(max, scroll));
|
const to = Math.min(min, Math.max(max, scroll));
|
||||||
// TODO(b/299934312): improve focus smoothness
|
// TODO(b/299934312): improve focus smoothness
|
||||||
const behavior: ScrollBehavior = !this.focusedTab ? 'smooth' : 'instant';
|
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() {
|
protected override render() {
|
||||||
|
Loading…
Reference in New Issue
Block a user