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:
Aidan Timson 2020-03-17 19:44:07 +00:00 committed by GitHub
parent cd6dcec644
commit 9ee647329b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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)
);
}