#problem with paper-tabs || ha-tabs || ha-expansion-panel || im dumb.

1 messages · Page 1 of 1 (latest)

pine prism
#

im trying to use ha-expansion-panel for my cards gui config editor and when i stick paper-tabs into it, the initial selection isnt set. i have the same component directly next to the expansion panel and it works correctly:

@state() private _selectedTabConfigurationTab = 0;

<ha-expansion-panel outlined>
  <div slot="header">Global Tab Configuration</div>
    <div class="toolbar">
      <paper-tabs
        id="tab-config-editor"
        .selected=${this._selectedTabConfigurationTab}
        @iron-activate=${this._handleSelectedTab}
      >
        <paper-tab>Attributes</paper-tab>
        <paper-tab>Styles</paper-tab>
      </paper-tabs>
    </div>
  </div>
</ha-expansion-panel>
<div class="toolbar">
  <paper-tabs
    id="tab-config-editor"
    .selected=${this._selectedTabConfigurationTab}
    @iron-activate=${this._handleSelectedTab}
  >
    <paper-tab>Attributes</paper-tab>
    <paper-tab>Styles</paper-tab>
  </paper-tabs>
</div>

in the second picture you can see that if i manually select the second tab it functions fine.

#

problem with paper-tabs || ha-tabs || ha-expansion-panel || im dumb.

pine prism
#

mwc-tab-bar and mwc-tab dont have this issue under the same context so its probably something with the way paper-tabs is built.