Popup Card is no longer working

[shwarnock]

My Home Assistant version: 0.XX.X

What I am doing:
I am using popup cards within browser_mod to open up remotes for my tvs when the entity for the remote is pressed. This was working fine for several months until today.

What I expected to happen:
Clicking my remote entity opens the popup with my built remote control

What happened instead:
The more info dialog for the entity is opened

Minimal steps to reproduce:

1. Create a popup card
2. Populate the popup card with a custom lovelace card
3. Link this to any entity
4. Click the entity

type: custom:popup-card
entity: remote.millennium_falcon
dismissable: true
card:
  type: custom:android-tv-card
  remote_id: remote.millennium_falcon
  slider_id: media_player.millennium_falcon
  media_player_id: media_player.millennium_falcon
  keyboard_id: media_player.android_tv_192_168_86_54
  rows:
    - - power
      - search
      - home
    - - emby
      - youtube
      - keyboard
    - - back
      - volume_down
      - volume_up
    - - touchpad
title: Millennium Falcon Remote

---

By replacing the space in the checkboxes ([ ]) with an X below, I indicate that I:

• [X ] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X ] Have made sure I am using the latest version of the plugin.

• [ X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [X ] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[IgorSimic]

I can confirm, it was stop working in version 2024.7

My simple example:

type: custom:popup-card
entity: sensor.sjenica_temperature
card:
  type: entities
  entities:
    - sensor.feels_like_sjenica
    - sensor.feels_like_sjenica_sonoff

Instead poping up this entities card on click, generic more info popup appeared.

[miberecz]

Came here to say the same.
I just installed the addon via HACS, followed the instructions to clear the browser cache (but tried in incognito and different browser also), registered my browser(s), created the invisible pop card for an entity, but still the more info dialog opens no mater what.

type: custom:popup-card
entity: fan.toronyventillator
title: Custom popup
dismissable: true
card:
  type: markdown
  content: This replaces the more-info dialog
size: normal

[rickbhs]

same here

[JacobDB]

Glad it's not just me!

[IgorSimic]

Problem comes with Frontend 20240705.0
On one on my rarely used computers popups worked as allways until I become message about new frontend version and reloaded.

[AndiRued]

Since everything didn't work, I deleted browser_mod completely and now use bubble-cards for popups. Looks better and offers more possibilities 😬

[JacobDB]

I also set up a new dashboard with Bubble Cards, but I still have use for this feature; it's nice being able to override the more info box for specific entities

[IgorSimic]

Hi all,
I want to share my finding.
Despite problem with more-info popup in frontend 20240705.0, this is still working if is enclosed in bootstrap-grid-card.
This means, if whatever entities in whatever cards and custom:popup-card(s) for those entities enclosed in same bootstrap-grid-card.
bootstrap-grid-card
This is not solution, but for me is life saver, because my dashboards heavily depends on custom more-info popups.

[VDRainer]

I want to share my finding

Thanks for sharing!
I was wondering why some popups still work since 2024.7.x.
I found that the more-info popups also work if they are enclosed in a View layout card

Be carefull with the layout syntax.
thomasloven/lovelace-layout-card#288 (comment)

[Sxyman815]

same for me. 2024.7 and 2024.7.1 both dont work and my code hasn't changed... thought i was crazy and rolled the whole house back to 2024.6 via restore and everything was fine. then i updated and problem is back. everyonce in awhile i can get it to come up but when you exit it it seems to be gone for good.

i was wondering if it is tied to the addition of visability ????as that came with 2024.7 and would be....could be messing with it.

[Lucif3r945]

I want to share my finding

Thanks for sharing! I was wondering why some popups still work since 2024.7.x. I found that the more-info popups also work if they are enclosed in a View layout card

Be carefull with the layout syntax. thomasloven/lovelace-layout-card#288 (comment)

brooo....... That effing works wonders!
I already use layout card so wrapping the popups in one took 2sec for me. You dont even need to set up areas/layout etc, you can just add a layout-card -> go directly to cards -> add popup card and done.
The preview of the popup card is still broken though, but it works!

so basically just...

type: custom:layout-card
layout_type: masonry
layout: {}
cards:
  - type: custom:popup-card
  - etc etc

[Spegeli]

the layout-card is a work-around (until we find a fix for the popup card self) but it adds an empty space in the dashboard.
Where the 2 red squares there are the 2 layout-cards. but better then no popup function currently ^^

//Edit: OK with the Layout Card i grouped now all Pop-up cards into one single Layout card and simply moved it to the bottom as Last Card in the Dashboard. Problem with empty space betweens cards solved.

[brandensilva]

Same issue here. I'm using the latest layout changes in 2024.7.x which I assume is part of the issue.

Honestly wish HA would just support a native solution for this given people want to have more control over their interfaces.

[AgentP38]

same for me

[keeema]

...and me

[jouster1974]

also come to report that in 2024.7.0, 1 and 2, browser mod seems to have disappeared with zero changed my end, winding back to 2024.6.* resolves the issue instantly

[AlenHodnik]

Dead for me too ...

[StKais]

Same Here - since the update, nothing works anymore

[liorpapir]

I'm having the same issue

[jdgiddings]

Same issue here

[oxymoron1629]

I'm just piling on, I'm having the same issue.

[sanderabbink]

@thomasloven Could you look into this problem and fix it? Since the last update, the popups no longer work via the "more info" way.

[sebastian-bartkowiak]

OK, I poked around to find the cause of the issue.

The core issue for me seems to be located in file js/plugin/popup-card.ts
There you can find two functions - connectedCallback & disconnectedCallback - their primary goal is to attach event listener to window instance listening for hass-more-info events being fired by the DOM. Now, the issue is - the event listeners are attached in connectedCallback properly, but immediately after that they are being detached by disconnectedCallback called from HA itself.
It seems to me that disconnectedCallback is called because of newly added functionality on HA side, which is "visibility". The code checking whether a card is visible or not looks at "popup" card and desides that it is, in fact, not visible (which is frankly true), and because of that it disconnects it from the rest of the frontend.
Furthermore, when you try to edit "popup" card via GUI you will notice that it's preview is not rendered at all. I suspect that the nature of this card (normally hidden, and only shown programmatically in specified conditions) just does not go along with how "visibility" was implemented on HA side.
Quick dirty fix I can think of is just removing window.removeEventListener("hass-more-info", this.popup); line, but I am sure that will have some further implications down the line.

Full disclaimer - I have no experience with HA frontend coding, so I might get something of it wrong :)

[sebastian-bartkowiak]

The part responsible for calling disconnectedCallback in HA frontend repo is over here - src/panels/lovelace/cards/hui-card.ts - line 219, function _updateVisibility, which as far as I can tell desides that "popup" card is not visible, so it desides to call _setElementVisibility function, which in turn calls removeChild on popup card itself.

I can see that _updateVisibility function optionally takes forceVisible boolean parameter, which looks promising for our use-case, but I am not (yet) sure how and where from is it being passed.

[sebastian-bartkowiak]

OK, so I have successfully got rid of the issue by commenting out two lines in js/plugin/popup-card.ts file -
this.removeAttribute("hidden"); and this.setAttribute("hidden", "");.

My understanding is - this parameter hides LitElement from the view, which (just recently) started to be respected by HA frontend (with "visibility" tab). The thing is - popup element is either way being displayed differently (with window.browser_mod?.service("popup", ...) method), so we don't really have to tell HA frontend whether popup element is displayed or not.

As far as I can tell there are no side effects of this, but then again - I have zero experience with HA frontend, so I might overlook some things.

[redford-jones]

Yes, can confirm the above fix from @sebastian-bartkowiak works for me too.

[Lucif3r945]

Aight... I'll have to make a fool out of myself.... Where is that file located on the HA server? Or is it compiled into something when browser_mod is installed...?

[anipad]

Aight... I'll have to make a fool out of myself.... Where is that file located on the HA server? Or is it compiled into something when browser_mod is installed...?

I will out myself too ;)

[sebastian-bartkowiak]

Yea, so actually it's not that simple to fix it by yourself. The distributed file is transpiled and bundled together with the rest of TS files. As far as I can see there are three options:

• if you are using Chrome (or other chromium based) browser you can leverage "Local overrides" option available in DevTools to manually edit browser_mod.js and remove those two lines - that might be easier than the other option, but will only affect the browser you do this operation on
• second option would be to actually edit the browser_mod.js file being served by HA to all connecting frontends. for that puropuse you would have to modify /config/custom_components/browser_mod/browser_mod.js file (be sure to make a backup just in case!) to get rid of those lines mentioned above (in my case those expressions are located in line 305, you have to replace
  "hui-card-preview"===this.parentElement.localName?(this.editMode=!0,this.removeAttribute("hidden")):this.setAttribute("hidden","")
  with
  "hui-card-preview"===this.parentElement.localName&&(this.editMode=!0)). on top of that you will probably have to rename/delete /config/custom_components/browser_mod/browser_mod.js.gz file, as it is an cached, compressed version of the library - with that in place you will still be served old version of the browser_mod.js file
  EDIT: obviously - be sure to clear browser/app cache, as usually when changing lovelace cards files!
• wait patiently for the fix to be included in the library itself 😄

[Lucif3r945]

Weird, file changed and saved properly, cache cleared, can't find any *gz file associated with BM - across the entire system, and the fix/change seems to have changed nothing functionality-wise.

Ah well, I'm fine using the layout-card bodgefix, lets hope option 3 happens soon :>

Thanks for taking the time of typing all that down though! I have a bit better understanding on how this whole file library thingy works now.

[mellamomax]

I´ve made a fork that fixes this issue until/if we ever get an actual update.
https://github.com/mellamomax/hass-browser_modpop/

This is a combined fork of:

• raymercury's repository with #619, which addresses pop-ups showing in fullscreen on mobile.

• For the popup not working with HA 2024.7.X, @sebastian-bartkowiak had a solution with #732.

NOTE: Pop-up cards still show as blank in edit mode_

Steps to implement:

1. Remove the original Browser_mod in HACS by clicking "ignore".
2. Then delete it under "devices & services"
3. Restart HA
4. Install the fork as a custom repo within HACS
5. Restart HA
6. Add "Browser_mod" under "devices & services" as usual
7. EDIT: refresh cache on mobile

Done! It should work immediately.