mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 15:26:36 +00:00
Fix Wrong Index for Filtered Tabs (#5221)
* Fix wrong index for filtered tabs * Set active tab to actual tab and use path * Update src/layouts/hass-tabs-subpage.ts Co-Authored-By: Paulus Schoutsen <paulus@home-assistant.io> * Update src/layouts/hass-tabs-subpage.ts Co-Authored-By: Paulus Schoutsen <paulus@home-assistant.io> Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io> Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
cd6dcec644
commit
9ee647329b
@ -37,12 +37,12 @@ class HassTabsSubpage extends LitElement {
|
||||
@property() public route!: Route;
|
||||
@property() public tabs!: PageNavigation[];
|
||||
@property({ type: Boolean, reflect: true }) public narrow = false;
|
||||
@property() private _activeTab: number = -1;
|
||||
@property() private _activeTab?: PageNavigation;
|
||||
|
||||
private _getTabs = memoizeOne(
|
||||
(
|
||||
tabs: PageNavigation[],
|
||||
activeTab: number,
|
||||
activeTab: PageNavigation | undefined,
|
||||
showAdvanced: boolean | undefined,
|
||||
_components,
|
||||
_language
|
||||
@ -56,31 +56,32 @@ class HassTabsSubpage extends LitElement {
|
||||
);
|
||||
|
||||
return shownTabs.map(
|
||||
(page, index) => html`
|
||||
<div
|
||||
class="tab ${classMap({
|
||||
active: index === activeTab,
|
||||
})}"
|
||||
@click=${this._tabTapped}
|
||||
.path=${page.path}
|
||||
>
|
||||
${this.narrow
|
||||
? html`
|
||||
<ha-icon .icon=${page.icon}></ha-icon>
|
||||
`
|
||||
: ""}
|
||||
${!this.narrow || index === activeTab
|
||||
? html`
|
||||
<span class="name"
|
||||
>${page.translationKey
|
||||
? this.hass.localize(page.translationKey)
|
||||
: name}</span
|
||||
>
|
||||
`
|
||||
: ""}
|
||||
<mwc-ripple></mwc-ripple>
|
||||
</div>
|
||||
`
|
||||
(page) =>
|
||||
html`
|
||||
<div
|
||||
class="tab ${classMap({
|
||||
active: page === activeTab,
|
||||
})}"
|
||||
@click=${this._tabTapped}
|
||||
.path=${page.path}
|
||||
>
|
||||
${this.narrow
|
||||
? html`
|
||||
<ha-icon .icon=${page.icon}></ha-icon>
|
||||
`
|
||||
: ""}
|
||||
${!this.narrow || page === activeTab
|
||||
? html`
|
||||
<span class="name"
|
||||
>${page.translationKey
|
||||
? this.hass.localize(page.translationKey)
|
||||
: name}</span
|
||||
>
|
||||
`
|
||||
: ""}
|
||||
<mwc-ripple></mwc-ripple>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
}
|
||||
);
|
||||
@ -88,7 +89,7 @@ class HassTabsSubpage extends LitElement {
|
||||
protected updated(changedProperties: PropertyValues) {
|
||||
super.updated(changedProperties);
|
||||
if (changedProperties.has("route")) {
|
||||
this._activeTab = this.tabs.findIndex((tab) =>
|
||||
this._activeTab = this.tabs.find((tab) =>
|
||||
this.route.prefix.includes(tab.path)
|
||||
);
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user