Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popup close itself but not supposed to #1212

Open
Nosnahc opened this issue Feb 6, 2025 · 1 comment
Open

Popup close itself but not supposed to #1212

Nosnahc opened this issue Feb 6, 2025 · 1 comment
Labels
bug Something isn't working

Comments

@Nosnahc
Copy link

Nosnahc commented Feb 6, 2025

Describe the bug
When I use a button inside a popup card, the card close itself but is not supposed to.
I got another card with a similar code but the not same behaviour.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the popup card
  2. Click on 'Allumer'
  3. The popup close itself

Expected behavior
The popup is still open

YAML
If applicable, add any relevant YAML code.

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#3dprint"
    name: Imprimante 3D
    icon: mdi:printer-3d-nozzle
    columns: 2
    show_header: true
    show_state: false
    show_last_changed: true
    show_attribute: false
    close_on_click: false
    double_tap_action:
      action: none
    hold_action:
      action: none
    button_action:
      tap_action:
        action: none
      double_tap_action:
        action: none
      hold_action:
        action: none
    tap_action:
      action: none
    entity: switch.smart_plug_19011091428151251h0234298f149691_outlet
  - type: vertical-stack
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-columns: 1fr
          grid-template-rows: 80px min-content min-content
          grid-template-areas: |
            "power"
            "state"
            "webcam"
        cards:
          - type: custom:button-card
            name: >
              [[[  

              if
              (states['switch.smart_plug_19011091428151251h0234298f149691_outlet'].state
              == 'on')
                return 'Eteindre';
              else
                return 'Allumer';
              ]]] 
            icon: mdi:power
            show_state: false
            tap_action:
              action: call-service
              target: {}
              service: script.gestion_3dprint
              confirmation:
                text: ON/OFF printer?
            view_layout:
              grid-area: power
            styles:
              card:
                - height: 100%
                - background: >
                    [[[  

                    if
                    (states['switch.smart_plug_19011091428151251h0234298f149691_outlet'].state
                    == 'on')
                      return 'linear-gradient(225deg, rgba(237,237,237,1) 0%, rgba(228,140,140,1) 100%)';
                    else
                      return 'linear-gradient(225deg, rgba(237,237,237,1) 0%, rgba(121,155,140,1) 100%)';
                    ]]] 
              grid:
                - grid-template-areas: "\"n i\""
                - grid-template-rows: 1fr 1fr
                - grid-template-columns: 1fr
              icon:
                - width: 54px
                - color: var(--text-color)
              img_cell:
                - justify-self: end
                - width: 40px
                - height: 40px
                - padding-right: 20px
              name:
                - justify-self: start
                - font-size: 20px
                - line-height: 40px
                - font-weight: 600
                - padding-left: 30px
                - color: var(--text-color)
          - type: conditional
            conditions:
              - entity: switch.smart_plug_19011091428151251h0234298f149691_outlet
                state: "on"
            view_layout:
              grid-area: state
            card:
              type: custom:button-card
              name: >
                [[[ return states['sensor.raspberrypi_printer_state'].state;
                ]]] 
              show_state: false
              custom_fields:
                thumbnail:
                  card:
                    type: picture-glance
                    camera_image: camera.raspberrypi_thumbnail
                    entities: []
                filename_v: |
                  [[[ return states['sensor.raspberrypi_filename'].state; ]]] 
                bar: |
                  [[[
                    var state = states['sensor.raspberrypi_progress'].state;
                    return  `<div> <div style="background: #1679AB; height:10px;width:${state}%; "></div></div>` 
                  ]]]  
                nozzle_temp_v: >
                  [[[ return 
                  states['sensor.raspberrypi_extruder_temperature'].state + '°/'
                  + states['sensor.raspberrypi_extruder_target'].state +
                  '°';]]] 
                bed_temp_v: >
                  [[[ return states['sensor.raspberrypi_bed_temperature'].state
                  + '°/' + states['sensor.raspberrypi_bed_target'].state + '°';
                  ]]] 
                time_left_v: >
                  [[[ return states['sensor.raspberrypi_print_time_left'].state;
                  ]]] 
                layer_v: >
                  [[[ return states['sensor.raspberrypi_current_layer'].state +
                  '/' + states['sensor.raspberrypi_total_layer'].state; ]]] 
                filename_l: Filename
                nozzle_temp_l: Nozzle Temp.
                bed_temp_l: Bed Temp.
                time_left_l: Time Left
                layer_l: Layers
                pourcentage: >
                  [[[ return 'Progression ' +
                  states['sensor.raspberrypi_progress'].state + '% :']]]
              styles:
                custom_fields:
                  thumbnail:
                    - transform: scale(0.5)
                  bar:
                    - border-radius: 50px
                    - background: "#CCCCCC"
                    - height: 10px
                  pourcentage:
                    - justify-self: start
                  filename_l:
                    - justify-self: start
                  nozzle_temp_l:
                    - justify-self: start
                  bed_temp_l:
                    - justify-self: start
                  time_left_l:
                    - justify-self: start
                  layer_l:
                    - justify-self: start
                  filename_v:
                    - justify-self: stretch
                  nozzle_temp_v:
                    - justify-self: end
                  bed_temp_v:
                    - justify-self: end
                  time_left_v:
                    - justify-self: end
                  layer_v:
                    - justify-self: end
                card:
                  - height: 100%
                  - padding: 30px
                  - background: var(--background-color)
                grid:
                  - grid-template-areas: >-
                      "n thumbnail" "filename_l filename_v" "pourcentage
                      pourcentage" "bar bar" "nozzle_temp_l nozzle_temp_v"
                      "bed_temp_l bed_temp_v" "time_left_l time_left_v" "layer_l
                      layer_v"
                  - grid-template-rows: 100px 1fr 1fr 1fr 1fr 1fr 1fr min-content
                  - grid-template-columns: 1fr 1fr
                name:
                  - font-size: 20px
                  - line-height: 40px
                  - font-weight: 600
                  - color: var(--text-color)
                  - justify-self: start
          - type: conditional
            conditions:
              - entity: switch.smart_plug_19011091428151251h0234298f149691_outlet
                state: "on"
            view_layout:
              grid-area: webcam
            card:
              type: custom:button-card
              show_state: false
              card_mod:
                style: |
                  ha-card {
                    transform: rotate(180deg) !important;
                  }
              custom_fields:
                cam:
                  card:
                    type: picture-glance
                    camera_image: camera.raspberrypi_webcam_2
                    entities: []
              style: null
              card:
                - background: none
                - height: 100%

Informations (please complete the following information):

  • OS: iOS/Windows/Android
  • Browser/App: Firefox
  • Bubble Card version: 2.4.0
  • Home Assistant version: 2025.2.0
@Nosnahc Nosnahc added the bug Something isn't working label Feb 6, 2025
@nurtext
Copy link

nurtext commented Feb 16, 2025

I've had the same issue on my popup-cards as well, this is caused by the confirmation dialog (which your are requesting with "ON/OFF printer?") and is triggered by clicking it, thus counting as a click outside of the popup-card. By default the popup setting for "Optional - close the popup by clicking outside of it (a refresh is needed)" is enabled.

So either disable this using the visual editor or add close_by_clicking_outside: false to your YAML configuration for the required popup-card.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants