The card defined for the popup is repeated + Console error messages

heymoe commented 5 years ago

My Home Assistant version: 0.XX.X

0.88.2
Chrome: 72.0.3626.121 in incognito mode, no plugins

My lovelace configuration method (GUI or yaml):

GUI / Storage

What I am doing:

Trying to add a simple popup for testing

What I expected to happen:

I click on the defined entity for the the popup and I get the expected popup

What happened instead:

I get a popup BUT the card defined to show up in the popup is duplicated multiple times.

Minimal steps to reproduce: Use the below code lovelace code, save and click on the sun.sun entity

# The least amount of code possible to reproduce my error

name: Home Dashboard
resources:
  - type: js
    url: /customcards/card-tools.js?track=true
  - type: js
    url: /customcards/popup-card.js?track=true
views:
  - cards:
      - type: entities
        entities:
          - entity: sun.sun
        title: Sun
        show_header_toggle: false
    badges: []
    title: Test
    icon: ''
    popup_cards:
      sun.sun:
        title: Testing
        card:
          type: entities
          entities:
            - sensor.moon

# End of code

Error messages from the browser console:

This is just part of the console log since it looks like it's just repeating over and over again. The saved log ended up having over 370,000 lines.
Maybe a bug in card-tools?

card-tools.js?track=true:403 CARD-TOOLS IS INSTALLEDDeviceID: ######-######
card-tools.js?track=true:80 Uncaught RangeError: Maximum call stack size exceeded.
    at _createThing (card-tools.js?track=true:80)
    at Function.createThing (card-tools.js?track=true:112)
    at Function.createCard (card-tools.js?track=true:133)
    at HTMLElement.document.querySelector.addEventListener (popup-card.js?track=true:22)
    at Function.fireEvent (card-tools.js?track=true:59)
    at Function.moreInfo (card-tools.js?track=true:199)
    at Function.popUp (card-tools.js?track=true:367)
    at HTMLElement.document.querySelector.addEventListener (popup-card.js?track=true:24)
    at Function.fireEvent (card-tools.js?track=true:59)
    at Function.moreInfo (card-tools.js?track=true:199)
_createThing @ card-tools.js?track=true:80
createThing @ card-tools.js?track=true:112
createCard @ card-tools.js?track=true:133
document.querySelector.addEventListener @ popup-card.js?track=true:22
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ card-tools.js?track=true:59
moreInfo @ card-tools.js?track=true:199
popUp @ card-tools.js?track=true:367
document.querySelector.addEventListener @ popup-card.js?track=true:24
fireEvent @ app-2a009154.js:1305
_handleClick @ c44e5d59e2d7eb01278d.chunk.js:5393
element.addEventListener @ c44e5d59e2d7eb01278d.chunk.js:5391

By putting an X in the boxes ([ ]) 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 popup-card.

[X] Have made sure I am using the latest version of card-tools.

[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.

heymoe commented 5 years ago

Screenshot of the popup:

popup-screen1

heymoe commented 5 years ago

Upgraded Home Assistant to 0.89.1 last night. Still having the same problem.

heymoe commented 5 years ago

I just updated to the latest card-tools (86658c0) and popup-card (78d39ab) and I no longer get the console errors but I'm still getting the duplicate popup cards BUT I think I've narrowed it down to a conflict with a different resource module.

mini-media-player ( https://github.com/kalkih/mini-media-player )

Here is a new test lovelace config:

resources:
  - type: js
    url: /customcards/card-tools.js
  - type: module
    url: /customcards/mini-media-player-bundle.js
  - type: js
    url: /customcards/popup-card.js
views:
  - cards:
      - type: entities
        entities:
          - entity: media_player.ruoffice
            group: true
            name: Broken Popup
            type: 'custom:mini-media-player'
          - entity: media_player.ruoffice
            name: Working Popup
        title: Test Card
        show_header_toggle: false
    badges: []
    icon: ''
    popup_cards:
      media_player.ruoffice:
        card:
          type: entities
          entities:
            - sun.sun
            - sensor.moon
        title: Test Popup

So if I you assign the popup to an entity (Broken Popup) that is using the mini-media-player custom type I get a duplicated popup (see screenshot) but if I click on the non-custom entity (Working Popup), the popup works as expected.

popup-screen2

heymoe commented 5 years ago

Just a quick additional note: The latest update / lovelace test config is more or less the final use case I've been trying to get working. When I started debugging this issues I noticed all the console errors so my initial report didn't have the mini-media-player in it because I was getting all those console errors using a stripped down / bare minimum lovelace config with the popup code.

I'm guessing that the console errors were unrelated to my final use case goal and those were fixed with the latest updates to card-tools and popup-card.

bmorgan99 commented 5 years ago

I just updated to the latest card-tools (86658c0) and popup-card (78d39ab) and I no longer get the console errors but I'm still getting the duplicate popup cards BUT I think I've narrowed it down to a conflict with a different resource module.

mini-media-player ( https://github.com/kalkih/mini-media-player )

Here is a new test lovelace config:
resources:
  - type: js
    url: /customcards/card-tools.js
  - type: module
    url: /customcards/mini-media-player-bundle.js
  - type: js
    url: /customcards/popup-card.js
views:
  - cards:
      - type: entities
        entities:
          - entity: media_player.ruoffice
            group: true
            name: Broken Popup
            type: 'custom:mini-media-player'
          - entity: media_player.ruoffice
            name: Working Popup
        title: Test Card
        show_header_toggle: false
    badges: []
    icon: ''
    popup_cards:
      media_player.ruoffice:
        card:
          type: entities
          entities:
            - sun.sun
            - sensor.moon
        title: Test Popup
So if I you assign the popup to an entity (Broken Popup) that is using the mini-media-player custom type I get a duplicated popup (see screenshot) but if I click on the non-custom entity (Working Popup), the popup works as expected.

I concur: https://community.home-assistant.io/t/my-lovelace-plugins/70726/990_

CultusMechanicus commented 5 years ago

I'm seeing the same behaviour and console errors in 0.90.2 with the latest cardtools and popup. My Lovelace config hasn't changed in about a month, so I'm assuming it's something introduced in one of the updates.

thomasloven commented 5 years ago

The errors or the multiple popups when clicking a mini-media-player?

heymoe commented 5 years ago

Correct. I don't think the errors I noted in my original submission were related as those have gone away with other updates. Now it's just the duplicated popup card being displayed as the screenshot shows in this post (https://github.com/thomasloven/lovelace-popup-card/issues/17#issuecomment-471756955) when clicking on an entity that is using the mini-media-player custom type. I personally haven't tested to see if the same duplication happens with other custom types though.

iantrich commented 5 years ago

I came across this awhile back and haven't been too bothered by it but decided to look at it a little bit today and found the solution. Going to submit a PR to the mini-media-player tonight that should resolve it

thomasloven / lovelace-popup-card

The card defined for the popup is repeated + Console error messages #17