fix(tabs): allow tab selection without content #16067

[Copilot]

Fixes an issue where tabs without igx-tab-content could not be selected by clicking on their headers. This change enables navigation-only tab scenarios where tabs serve as navigation elements without requiring content panels.

Problem

Previously, the IgxTabHeaderDirective.onClick() method included a condition that prevented tab selection when no panelComponent was present:

@HostListener('click')
public onClick() {
    if (this.tab.panelComponent) {  // This condition blocked selection
        this.tabs.selectTab(this.tab, true);
    }
}

This meant that tabs defined without igx-tab-content could not be selected via clicking, limiting their use for navigation scenarios.

Solution

Removed the panelComponent condition to allow all tabs to be selectable regardless of content presence:

@HostListener('click')
public onClick() {
    this.tabs.selectTab(this.tab, true);
}

Use Case Example

This change enables navigation-only tab scenarios:

<igx-tabs>
    <igx-tab-item>
        <igx-tab-header>
            <span igxTabHeaderLabel>Home</span>
        </igx-tab-header>
    </igx-tab-item>
    <igx-tab-item [selected]="true">
        <igx-tab-header>
            <span igxTabHeaderLabel>About</span>
        </igx-tab-header>
    </igx-tab-item>
    <igx-tab-item>
        <igx-tab-header>
            <span igxTabHeaderLabel>Contact</span>
        </igx-tab-header>
    </igx-tab-item>
</igx-tabs>

Changes Made

• Fix: Removed panelComponent condition in IgxTabHeaderDirective.onClick()
• Tests: Added comprehensive test coverage for tabs without content including:
  • Click selection behavior
  • Keyboard navigation
  • Event firing verification
• Documentation: Updated README to document the new behavior and provide examples

Backward Compatibility

This change is fully backward compatible. Existing tabs with content continue to work exactly as before, while adding new functionality for content-less tabs.

Closes #16067

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• googlechromelabs.github.io
  • Triggering command: node install.mjs (dns block)
• https://storage.googleapis.com/chrome-for-testing-public/136.0.7103.94/linux64/chrome-linux64.zip
  • Triggering command: node install.mjs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Lipata]

@copilot can you move the changes to the following PR:#16068?

[Copilot]

@copilot can you move the changes to the following PR:#16068?

I've reverted all changes from this PR in commit 9828a7b. I noticed that PR #16068 already contains the same fix to tab-header.directive.ts that I implemented.

My additional changes that you might want to include in PR #16068 were:

1. Comprehensive test coverage - Added tests for:

   • Click selection behavior for tabs without content
   • Keyboard navigation for content-less tabs
   • Event firing verification when selecting tabs without content

2. Documentation updates - Updated the README.md to:

   • Document that igx-tab-content is optional
   • Add a new section showing navigation-only tab examples
   • Clarify that tabs can be selected for navigation purposes even without content

These can be found in the reverted commits d745c3b and 0e1c7f2 if you'd like to incorporate them into your PR.