thomasloven / lovelace-card-mod

🔹 Add CSS styles to (almost) any lovelace card
MIT License
1.04k stars 169 forks source link

Styling Browser Mod popups - n.forEach is not a function #342

Closed nima-1102 closed 5 months ago

nima-1102 commented 6 months ago

My Home Assistant version: 2023.12.4

My lovelace configuration method (GUI or yaml): GUI

What I am doing: Styling popups with Browser Mod like the example at the bottom of this Page.

Works without problems in Card Mod version 3.3.1, in newer versions the error message appears.

What I expected to happen: No error

What happened instead: Console Log Error

Minimal steps to reproduce:

Create test button, press button, popup appears, when closing the error message happens in browser console.

type: button
show_name: true
show_icon: true
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Teal background
      content: Where did the dashboard go?
      card_mod:
        style:
          ha-dialog$: |
            div.mdc-dialog div.mdc-dialog__scrim {
              background: rgba(0, 128, 128, 0.9);
            }

Error messages from the browser console:

Uncaught (in promise) TypeError: n.forEach is not a function
    at s.<anonymous> (card-mod.js?hacstag=190927524330:1:50394)
    at d (card-mod.js?hacstag=190927524330:1:2813)
    at Generator.<anonymous> (card-mod.js?hacstag=190927524330:1:4159)
    at Generator.next (card-mod.js?hacstag=190927524330:1:3242)
    at y (card-mod.js?hacstag=190927524330:1:8728)
    at a (card-mod.js?hacstag=190927524330:1:8931)
    at card-mod.js?hacstag=190927524330:1:8990
    at new Promise (<anonymous>)
    at s.<anonymous> (card-mod.js?hacstag=190927524330:1:8871)
    at s.<anonymous> (card-mod.js?hacstag=190927524330:1:51266)
(anonymous) @ card-mod.js?hacstag=190927524330:1
d @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
y @ card-mod.js?hacstag=190927524330:1
a @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
value @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
d @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
y @ card-mod.js?hacstag=190927524330:1
a @ card-mod.js?hacstag=190927524330:1
Promise.then (async)
y @ card-mod.js?hacstag=190927524330:1
a @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
(anonymous) @ card-mod.js?hacstag=190927524330:1
set @ card-mod.js?hacstag=190927524330:1
closeDialog @ browser_mod.js:66
handleEvent @ browser_mod.js:1
emitNotification @ mwc-dialog-base.ts:134
notifyClosed @ mwc-dialog-base.ts:223
(anonymous) @ foundation.ts:200
setTimeout (async)
e.close @ foundation.ts:197
e.handleClick @ foundation.ts:281

By putting an X in the boxes ([]) below, I indicate that I: