tab with no content doesn't apply selection on tab headers #16067
Description
Description
Define a tab with some headers and no content.
<igx-tabs>
<igx-tab-item class="tab-item">
<igx-tab-header>
<igx-icon igxTabHeaderIcon>
info
</igx-icon>
<span igxTabHeaderLabel>View 1</span>
</igx-tab-header>
<!-- <igx-tab-content>
<p>Content for View 1</p>
</igx-tab-content> -->
</igx-tab-item>
<igx-tab-item class="tab-item">
<igx-tab-header>
<igx-icon igxTabHeaderIcon>
info
</igx-icon>
<span igxTabHeaderLabel>View 2</span>
</igx-tab-header>
<!-- <igx-tab-content>
<p>Content for View 2</p>
</igx-tab-content> -->
</igx-tab-item>
<igx-tab-item class="tab-item">
<igx-tab-header>
<igx-icon igxTabHeaderIcon>
info
</igx-icon>
<span igxTabHeaderLabel>View 3</span>
</igx-tab-header>
<!-- <igx-tab-content>
<p>Content for View 3</p>
</igx-tab-content> -->
</igx-tab-item>
</igx-tabs>Result
Cannot change selected tab
Expected result
Can change the selected tab. Although it is not a common scenario to have content outside a tab, the tab can still act as a navigation point, and the scenario should be supported.
When the component was created, then it was implemented to not support that:
@HostListener('click')
public onClick() {
if (this.tab.panelComponent) { // can be removed
this.tabs.selectTab(this.tab, true);
}
}