diff --git a/packages/widgets/src/tabbar.ts b/packages/widgets/src/tabbar.ts index c307bbb2c..6ababc214 100644 --- a/packages/widgets/src/tabbar.ts +++ b/packages/widgets/src/tabbar.ts @@ -370,7 +370,7 @@ export class TabBar extends Widget { if (value) { this.node.classList.add('lm-mod-scrollable'); } else { - this.node.classList.add('lm-mod-scrollable'); + this.node.classList.remove('lm-mod-scrollable'); } this.maybeSwitchScrollButtons(); } @@ -708,7 +708,11 @@ export class TabBar extends Widget { content[i] = renderer.renderTab({ title, current, zIndex }); } VirtualDOM.render(content, this.contentNode); + this.maybeSwitchScrollButtons(); + + // Scroll the current tab into view. + this.scrollCurrentIntoView(); } protected onResize(msg: Widget.ResizeMessage): void { @@ -716,6 +720,28 @@ export class TabBar extends Widget { this.maybeSwitchScrollButtons(); } + /** + * Scroll the current tab into view. + */ + protected scrollCurrentIntoView() { + if (this.scrollingEnabled) { + const currentNode = this.contentNode.children.item(this.currentIndex); + if (currentNode) { + currentNode.scrollIntoView(); + if (this.orientation == 'horizontal') { + currentNode.scrollTop = 0; + } else { + currentNode.scrollLeft = 0; + } + } else { + console.error('Current tab node not found'); + } + } + } + + /** + * Show/hide scroll buttons if needed. + */ protected maybeSwitchScrollButtons() { const scrollBefore = this.scrollBeforeButtonNode; const scrollAfter = this.scrollAfterButtonNode; @@ -1174,6 +1200,11 @@ export class TabBar extends Widget { return; } + // Do nothing if neither press nor release was on a tab. + if (index === -1 && data.index === -1) { + return; + } + // Ignore the release if the title is not closable. let title = this._titles[index]; if (!title.closable) { diff --git a/packages/widgets/style/tabbar.css b/packages/widgets/style/tabbar.css index ab34de433..741979635 100644 --- a/packages/widgets/style/tabbar.css +++ b/packages/widgets/style/tabbar.css @@ -94,7 +94,7 @@ display: none !important; } -.lm-TabBar-addButton.lm-mod-hidden { +.lm-TabBar-button.lm-mod-hidden { display: none !important; }