Skip to content

Feature request: public API to read/set the active tab at runtime #41

Description

@pasqua80

Context

I'm using the ddc.settings API to build interactive controls inside my dashboard (per the docs' own suggested use case: "buttons that enable/disable layers, screen saver, animations, tabs behavior"). It works great for most of what I needed, but I hit a gap specifically around tabs.

The gap

  • default_tab (via ddc.settings.get/set) only controls the tab shown on initial load — it's not the "currently active tab", and setting it doesn't switch the view live.
  • There's no documented way to:
    1. Read which tab is currently active.
    2. Switch to a specific tab at runtime (e.g. from a button on a card living inside a different tab), on demand — not time-based.

Use case

A simple "back to Home" button placed on a secondary tab, so a kiosk/tablet dashboard doesn't rely on the tab bar alone for navigation.

What I found while investigating (reverse-engineered from the bundled JS, not from the docs)

  • The component instance exposes this.activeTab.
  • Clicking a tab internally calls a private method: this._switchActiveTab_(tabId, { reason }).
  • Each tab button in the DOM is <button class="ddc-tab" data-tab-id="...">, living inside the card's own shadowRoot.

Workaround I ended up using (tested and working): walk up through shadow DOM boundaries from a card living inside the drag-and-drop-card, find the <drag-and-drop-card> host, then simulate a real .click() on shadowRoot.querySelector('.ddc-tab[data-tab-id="target"]') — deliberately avoiding the private _switchActiveTab_ method in favor of the (still undocumented, but less "clearly internal") DOM structure.

Why I'd rather not rely on this long-term

  • _switchActiveTab_ is explicitly private (underscore-prefixed) — no guarantee it survives a refactor.
  • The .ddc-tab / data-tab-id DOM structure isn't documented as a public contract either, so a future styling/markup change could silently break this without appearing in a changelog as a breaking change.
  • There's no public event to know when the active tab changes, so "read current tab" has to poll activeTab from outside rather than react to it.

Proposal

Since ddc.settings already covers adjacent tab settings (tabs, default_tab, tabs_position, etc.), it seems like the natural place to extend:

  • ddc.settings.get('active_tab') — read the currently active tab id.
  • ddc.settings.set('active_tab', 'tabId') — switch tabs at runtime (mirroring how set() already works for other keys).
  • Optionally, a ddc:active-tab-changed event (dispatched with composed: true so it crosses shadow boundaries) that other cards could subscribe to, similar to the existing ddc:settings-changed.

Small doc gap noticed along the way

While digging through the bundle I found tabs_auto_return_enabled / tabs_auto_return_tab / tabs_auto_return_delay (return to a given tab after N ms of inactivity) — it works great and is exactly the kind of thing I'd expect to find documented, but I couldn't find it mentioned anywhere in the README. Might be worth adding a line about it for discoverability.

Happy to test a beta or provide more detail on my setup if that's useful. Thanks for the great card!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions