Interacting with plotly-graph closes popup unexpectedly on desktop browsers

[AndLindemann]

Describe the bug
Not entirely sure this is a bubble card bug, but when I have a plotly-graph card in a bubble popup, any interaction with that graph card will close the popup, despite close_on_click being set to false. This happens on the desktop only (Firefox/Windows tested). On mobile, I can drag the plotly graph without issues, but on the desktop whenever I drag the graph or click one of the buttons on the plotly card, it closes the popup.

To Reproduce

      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: "#energie"
            name: Energie
            close_on_click: false
            show_last_updated: false
            show_state: false
            show_attribute: false
            tap_action:
              action: none
            double_tap_action:
              action: none
            hold_action:
              action: none
            show_icon: true
            "false": []
            entity: vacuum.robi_one
            icon: mdi:solar-power-variant
            bg_opacity: "10"
            hide_backdrop: false
            shadow_opacity: "0"
            bg_blur: "14"
            margin_top_mobile: "-56px"
            button_type: name
            scrolling_effect: true
          - type: custom:plotly-graph
            tap_action:
              action: none
            double_tap_action:
              action: none
            hold_action:
              action: none
            entities:
              - entity: sensor.solar_panel_to_house_kwh
                name: PV Eigenverbrauch
                type: bar
                statistic: state
                period: hour
                marker:
                  color: "#97cd07"
                  opacity: 0.9
                filters:
                  - delta
              - entity: sensor.solaredge_m1_imported
                name: Netzbezug
                type: bar
                statistic: state
                period: hour
                marker:
                  color: "#cd0797"
                  opacity: 1
                filters:
                  - delta
              - entity: sensor.solaredge_m1_exported
                name: Eingespeist
                type: bar
                statistic: state
                period: hour
                marker:
                  color: "#0797cd"
                  opacity: 0.9
                filters:
                  - delta
                  - map_y_numbers: y *(-1)
            layout:
              barmode: relative
              bargap: 0.2
              uniformtext:
                minsize: 12
                mode: show
              modebar:
                orientation: h
                remove: pan
              margin:
                t: 25
                l: 30
                r: 30
              legend:
                "y": -0.25
                x: 0.02
              xaxis:
                gridcolor: rgba(238,235,235,0.3)
                showgrid: true
                linewidth: 0
                linecolor: null
                nticks: 6
              yaxis:
                visible: false
            hours_to_show: current_day
            refresh_interval: 0
            title: Energieverbrauch
            card_mod:
              style: |
                ha-card {
                    border-width: 0px;
                  }

Expected behavior
Being able to interact with the plotly graph card without closing the popup.

Screenshots
n/a

Informations (please complete the following information):

• OS: Windows
• Browser Firefox
• Bubble Card version 2.0.0-beta.11
• Home Assistant version 2024.5.5

Additional context
n/a

Thank you! 🍻

[Clooos]

Hi, I'm not sure if this can help but can you try to add this card inside an horizontal stack?

[AndLindemann]

Unfortunately that doesn't help. Popup will still close on any interaction.

[Clooos]

Thank you for the details, I will take a closer look at this.

[Clooos]

Hi, I've added the possibility to disable the « close by clicking outside » pop-up feature in the editor (in v2.0.0-rc-1). You can change this behavior in YAML by adding close_by_clicking_outside: false.

I really hope that this will fix your issue 🤞

[AndLindemann]

I saw that and gave it a try. Interestingly, this very simple card still closes when clicking outside:

      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: "#energie"
            name: Energie
            close_by_clicking_outside: false
            show_icon: true
            button_type: name
            icon: mdi:solar-power-variant
            margin_top_mobile: "-56px"

While this seemingly also uncomplicated card, does not:

      - type: vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: "#auto"
            close_by_clicking_outside: false
            button_type: name
            name: Wallbox
            icon: mdi:ev-station
            card_layout: normal
            bg_opacity: "10"
            hide_backdrop: false
            shadow_opacity: "0"
            bg_blur: "14"
            margin_top_mobile: "-56px"
            button_action:
              tap_action:
                action: url
                url_path: "http://something"
              double_tap_action:
                action: none
              hold_action:
                action: none
            tap_action:
              action: url
              url_path: "http://something"
            double_tap_action:
              action: none
            hold_action:
              action: none

Is that weird? What am I missing?

[Clooos]

Have you refreshed the page after toggling it? If you did refreshed this is really weird indeed.

Also to be sure is close_by_clicking_outside: false fixing your issue?

[AndLindemann]

This seems to work for me now, thanks. With close_by_clicking_outside, I can interact with the graphs without closing the popup.

[Clooos]

Glad that it's working now!