Bug after 2023.9 update

[PetitSphincter]

Hi,

After the 2023.9 update of HA i had this bug :

When i press modify the page to check for parameters it comes back to normal and as it's supposed to look :

I have several cards in it, but the parameters i use are the following :

  - type: custom:tabbed-card
    options: {}
    tabs:

   [...]

    styles:
      '--mdc-theme-primary': white
      '--mdc-tab-color-default': rgba(250, 255, 255, 0.7)
      '--mdc-tab-text-label-color-default': rgba(250, 255, 255, 0.7)
      '--mdc-typography-button-font-size': 10px
      '--mdc-tab-stacked-height': 55px

Never had this bug before 2023.9, it happened just after updating and appears everytime i refresh my browserr

[shaulbd]

I'm experiencing a similar issue where my icons become oversized and they don't return to their normal size until I enter edit mode.

[ky13d3nt0n]

My tabs have completely disappeared after upgrading.

[kinghat]

i dont usually update my home ha instance till after the first micro/patch so i havent seen it yet. ill probably take a look at it tomorrow.

[sdrapha]

I'm experiencing a similar issue where my icons become oversized and they don't return to their normal size until I enter edit mode.

Same here, they work after editing the ui, BUT as soon as you refresh the page, they go back to the broken state.

[SeanChengN]

Icons become oversized Normal

[ilearn2023au]

Facing the same issue immediately after today's update. All tabs are not working.

But works in edit mode:

[jaberhadi]

I have similar issue, tabs not working only small icon without tabs, I tried to update to the latest beta version then icons become oversized.

[mathgoy]

up with the same issue Hope we get a fix for my most favorite card!

[notownblues]

Same here, all tabs are gone

[uros76]

Same here, tabs gone :(

[kulmegil]

+1

min YAML:

type: custom:tabbed-card
tabs:
  - card:
      type: button
      icon: mdi:alpha-a-box
      name: Test Content A
    attributes:
      icon: mdi:numeric-1-box
  - card:
      type: button
      icon: mdi:alpha-b-box
      name: Test Content B
    attributes:
      icon: mdi:numeric-2-box

Result: Screen Shot 2023-09-07 at 17 00 10

[kulmegil]

It looks like the problem is related to frontend no longer loading initialization code for <mwc-tab-bar> and <mwc-tab> elements.

User can "fix it" by opening more info tab for weather entity in particular.

Therefore programmatically executing loadCardHelpers().then(ch => ch.importMoreInfoControl('weather')) line triggers frontend load more-info along with it's dependencies. Tested, and it does fix Tabbed Card so it's my proposed workaround / solution.

[daanthju]

Thanks @kulmegil works here too

[Geweldich]

@kulmegil @daanthju I'm interested in the workaround. Could you explain this more verbose or post your .js so I can compare the changes?

[Hubsi1304]

Sorry, but I also don't understand the workaround.

[daanthju]

@Geweldich @Hubsi1304

1. Create a file tabbedfix.js in your www folder and fill i with: loadCardHelpers().then(ch => ch.importMoreInfoControl('weather'))
2. Go to your dashboards → top right three dot menu → resources → bottom right add resource url: /local/tabbedfix.js type: JavaScript-module

[Hubsi1304]

Thanks a lot!!!

[Fauteck]

Thank you, @daanthju!

[daanthju]

Thank you, @daanthju!

Credits for @kulmegil

[smartqasa]

Thank you daanthju and @kulmegil.

[jcuesico]

Thank you @daanthju & @kulmegil! That works!

[nightjoyip]

@Geweldich @Hubsi1304

1. Create a file tabbedfix.js in your www folder and fill i with: loadCardHelpers().then(ch => ch.importMoreInfoControl('weather'))
2. Go to your dashboards → top right three dot menu → resources → bottom right add resource url: /local/tabbedfix.js type: JavaScript-module

It works，3Q!

[psleutel]

Same problem here

[IgorSimic]

I am using tabbed-card in several popup cards, and tabs are disappeared, I just see first tab, wiithout labels. Please, can this be fixed?

[droans]

It looks like the problem is related to frontend no longer loading initialization code for <mwc-tab-bar> and <mwc-tab> elements.

User can "fix it" by opening more info tab for weather entity in particular.

Therefore programmatically executing loadCardHelpers().then(ch => ch.importMoreInfoControl('weather')) line triggers frontend load more-info along with it's dependencies. Tested, and it does fix Tabbed Card so it's my proposed workaround / solution.

Would it make more sense to import mwc-tab and mwc-tab-bar?

I looked through the frontend commits and couldn't figure out what changed it. A search for mwc-tab in all the code shows that it's still included in the package.json. It also showed that the weather more-info dialog imports it, too, which is probably why this works.

I'm going to fork this repo and see if adding that helps.

[IgorSimic]

Strange. I can see tabs in opera for windows but not in edge or firefox. Also, nor native android app nor either browser on android shows no tabs. Update: After clicking on refresh button tabs disappeared in Opera too.

Another update: Thanks @daanthju I tryed your fix and it works both on Android and computer.

[droans]

It looks like the problem is related to frontend no longer loading initialization code for <mwc-tab-bar> and <mwc-tab> elements. User can "fix it" by opening more info tab for weather entity in particular. Therefore programmatically executing loadCardHelpers().then(ch => ch.importMoreInfoControl('weather')) line triggers frontend load more-info along with it's dependencies. Tested, and it does fix Tabbed Card so it's my proposed workaround / solution.

Would it make more sense to import mwc-tab and mwc-tab-bar?

I looked through the frontend commits and couldn't figure out what changed it. A search for mwc-tab in all the code shows that it's still included in the package.json. It also showed that the weather more-info dialog imports it, too, which is probably why this works.

I'm going to fork this repo and see if adding that helps.

Okay, I was able to get it work on my fork of the repo.

However, there is a non-insurmountable hiccup. When the file is built, it will try to create an element named mwc-ripple but the name is already being used. In the output file, I renamed it to tab-mwc-ripple and it worked fine.

I don't know that much about Javascript, so hopefully someone else is smart enough to figure out what to do.

I will submit a PR to merge my changes. If you want to otherwise get it working in the meantime, just add my repo (https://github.com/droans/tabbed-card) to HACS, uninstall tabbed-card, and install my version instead.

[kulmegil]

Sorry, I could have made the explanation simpler but I was writing a solution with dev in mind. @daanthju has already wrote nicely how to apply the patch on user's side.

@droans Yeaah I expected this would happen.

It's a recommended by frontend team to include all the dependencies in your custom elements. However only one custom element with a given tag name can exists. So to avoid potential conflict with fr Tabbed Card would have to both include modules but and rename all dependent custom element tag names.

Althou in particular most custom cards I checked uses mwc-ripple frontend provides. ik it comes with ha-card element you're expected to use when building custom card. I would consult with frontend team for advice since including e.g. mwc-ripple on every possible custom card feels redundant a bit.

Are you sure there is not conflict in other elements (like mwc-tab and mwc-tab-bar) as well? Frontend loads those on demand as noted.

[droans]

Althou in particular most custom cards I checked uses mwc-ripple frontend provides. I would consult with frontend team for advice since including e.g. mwc-ripple on every possible custom card feels redundant a bit.

I see that other cards such as Apex Charts import @material/mwc-ripple. I'll try adding that import and seeing if it works. I know JS can be a bit weird and my lack of experience doesn't help. I'm guessing it's trying to create mwc-ripple but can't since it already exists.

Are you sure there is not conflict in other elements (like mwc-tab and mwc-tab-bar) as well? Frontend loads those on demand as noted.

It doesn't seem so. It imported those just fine.

[shaulbd]

@droans I'm not sure what exactly happened but since applying your fix I can't create new cards. Getting the following error in console when I press "Add Card":

Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mwc-tab-indicator" has already been used with this registry define scoped-custom-element-registry.js:44 o custom-element.ts:21 o custom-element.ts:64 s tslib.es6.mjs:58 20816 mwc-tab-indicator.ts:22 Webpack 62

[droans]

@droans I'm not sure what exactly happened but since applying your fix I can't create new cards. Getting the following error in console when I press "Add Card":

Uncaught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mwc-tab-indicator" has already been used with this registry define scoped-custom-element-registry.js:44 o custom-element.ts:21 o custom-element.ts:64 s tslib.es6.mjs:58 20816 mwc-tab-indicator.ts:22 Webpack 62

Use 0.32.2-b3 for now. I'm still trying to figure out how to import mwc-ripple properly. It turns out that the issue I'm having isn't uncommon. I just need to figure out why.

[droans]

Yep, I can't figure it out. Looks like Mushroom has seen this issue before. I'd need someone smarter than me to take a look.

[kinghat]

hi, can any of you whom are ok with manual testing, perhaps @daanthju or @kulmegil, test this fix before i push an update to hacs? manual verification on a couple different browsers and mobile device apps would be helpful.

tabbed-card.zip

[disconn3ct]

It has only been a few minutes but the zip version seems to be working flawlessly. (The issue showed up incrementally for me across devices, so it may be lying/caching.)

The temporary fix seemed to trigger lots of reloads, especially casting, but that has ~stopped~ slowed down with this version as well. (Since reloads dump it back on the default tab, here's another vote for #70)

Adding a tabbed card is broken (only tested on ffx)

Tested on:

• Cast to nest mini
• Mobile app android
• FFX 116
• Ungoogled-Chromium 115

[kinghat]

The temporary fix seemed to trigger lots of reloads, especially casting, but that has ~stopped~ slowed down with this version as well. (Since reloads dump it back on the default tab, here's another vote for #70)

Adding a tabbed card is broken (only tested on ffx)

thanks for testing. is any of the above related to this issue? if not please keep this issue clean with pertinent information.

[disconn3ct]

is any of the above related to this issue?

I listed the observed changes since the last working version. Should I open each observed change in this test zip as a new issue? I thought you were asking for testing, I guess I misunderstood.

[kulmegil]

@kinghat It works for me on all dashboards and custom dialogs (where I use it mostly). Chromium / ff / mobile app on android. Made sure to remove previous workaround and force cleared caches.

~~edit: except for card editor. I should have tested adding new card first. The editor is blank now.~~ editor is an alpha feature so it's expected to be blank with this release.

[kinghat]

I listed the observed changes since the last working version. Should I open each observed change in this test zip as a new issue? I thought you were asking for testing, I guess I misunderstood.

The temporary fix seemed to trigger lots of reloads, especially casting, but that has stopped slowed down with this version as well. (Since reloads dump it back on the default tab, here's another vote for https://github.com/kinghat/tabbed-card/discussions/70)

the card was reloading previous to the fixed js file i provided? does the card have tabs? did you clear your browser cookies/cache before testing?

Adding a tabbed card is broken (only tested on ffx)

adding this card is now broken for you? can you provide more details on what is "broken" about it?

[kinghat]

im going to wait a few hours to see if anyone else chimes in with test reports before pushing a fix later today.

[kulmegil]

heh I just figured it 1minute after I posted that I was using 0.4 alpha the whole time ;D

[Mariusthvdb]

Not sure if this is the same but I now see tiny icons that are no longer functional

For comparison I also grabbed the regular menu bar icons. The tabbed card icons are the white ones.

I did set the width in the config to be minimized, but never succeeded in getting more than 4/5 icons in the header ;-)

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      .: |
        mwc-tab-bar {
          background: {{'var(--lovelace-background)'
                        if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
                        else 'var(--primary-color)'}};
        }
      mwc-tab:
        $:
          mwc-tab-indicator $: |
           .mdc-tab-indicator__content--underline {
              border-color: var(--text-color-off) !important;
            }

          .: |
            .mdc-tab {
              min-width: 80px;
            }
            .material-icons {
              display: contents !important;
            }

            .mdc-tab--active {
              --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
              /*background: var(--text-color-off) !important;*/
            }

#     .: |
#       tabbed-card {
#         --mdc-tab-horizontal-padding: 0px;
#       }

card:
  type: custom:tabbed-card
#   attributes:
#     isFadingIndicator: true
  styles:
    --mdc-tab-horizontal-padding: 0px;
    --mdc-theme-primary: gold
#     --mdc-theme-secondary: var(--text-color-off) # not functional
    --mdc-tab-color-default: var(--text-primary-color)

was always a perfect mod, using both card_mod and the tabbed-card now options.

[kinghat]

Not sure if this is the same but I now see tiny icons that are no longer functional

For comparison I also grabbed the regular menu bar icons. The tabbed card icons are the white ones.

I did set the width in the config to be minimized, but never succeeded in getting more than 4/5 icons in the header ;-)

is this v0.3.1 from hacs install? or from the fix js file i posted here: https://github.com/kinghat/tabbed-card/issues/115#issuecomment-1712028181? if its from my fix above you need to clear your browser cache/cookies and reload.

[kinghat]

i pushed the fix in https://github.com/kinghat/tabbed-card/releases/tag/v0.3.2 so you should get it shortly. if you update and still see the issue make sure to clear your cache and reload.

[Mariusthvdb]

well, the HACS update didnt fix it I am afraid:

still tiny, still cant click. only color changed

[VictoriousCupid]

well, the HACS update didnt fix it I am afraid:

still tiny, still cant click. only color changed

Had the same, cleared my case before sending a comment here... That fixed it.

[Mariusthvdb]

Wel surely I did too..

[kinghat]

well, the HACS update didnt fix it I am afraid:

still tiny, still cant click. only color changed

if you have cleared your cache and reloaded, then im not sure. its working fine in my dev environment and my home instance via browsers and android app. i dont have an ios device to test on unfortunately. will have to wait to see if others come in reporting its not fixed for them as well to continue looking at the issue.

[elpabre]

Issue solved for me : Chrome browser, Android & IOS.
Thanks for the job !

[pcampan]

FYI - I'm good using chrome and android. Appreciate the quick turnaround!

[Mariusthvdb]

if you have cleared your cache and reloaded, then im not sure. its working fine in my dev environment and my home instance via browsers and android app. i dont have an ios device to test on unfortunately. will have to wait to see if others come in reporting its not fixed for them as well to continue looking at the issue.

Can report succes after all!

I had meanwhile moved back to my swiper card replacement and after your fix reloaded the tabbed card. Ofc, using reload Frontend and cache refresh.

Even restarted the phone. And yet cache persisted.

Right now I killed the Frontend in the IOS app and reloaded the full app, which finally loaded afresh apparently .

Great work. Sorry for the false report before!