🐛 [Bug]: tiny select在画布中无法选中

[12266601032]

Environment

chrome 131.0.6778.70

Version

node v18.19.1

Version

2.0.0-rc.2

Link to minimal reproduction

Step to reproduce

1、拖入tiny select控件到画布 2、尝试选中tiny select发现会选中其父级元素

What is expected

No response

What is actually happening

No response

What is your project name

local demo

Any additional comments (optional)

推测是渲染tiny select组件后，从props传入的data-uid未正确渲染出来， 导致在设计器中未被识别为正常节点，因而造成无法被正确选中

[MrBearPresident]

Could you make a gif/video from your issue?

[ElementZoom]

Could you make a gif/video from your issue?

https://github.com/user-attachments/assets/29e0f40a-5ec6-44bb-96aa-8fd3287ea26f

Sure see above. The first two actions are hold action and the last two actions are single tap action.

[MrBearPresident]

Still don't have enough info.

• Please provide complete yaml of the card.
• Do you also experience this on a pc?
• On the gif, I can't see what you're clicking next time check the box for touch representation. (Sorry for the dutch)

[ElementZoom]

• Please provide complete yaml of the card.

type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Mute
    tap_action:
      action: toggle
      service: input_boolean.toggle
    entity: input_boolean.silent_mode
    hold_action:
      action: more-info
  - name: Climate
    show_background: false
    tap_action:
      navigation_path: "#Heatpump"
      action: navigate
    show_last_changed: false
    show_state: false
    entity: climate.heat_pump
    hold_action:
      action: none
  - name: Away Mode
    show_background: false
    tap_action:
      action: toggle
      navigation_path: "#shopping-list"
    entity: input_boolean.away_mode
    hold_action:
      action: none
  - name: Shopping List
    icon: mdi:cart-outline
    show_background: false
    tap_action:
      action: navigate
      navigation_path: "#shopping-list"
    hold_action:
      action: none
  - name: Security
    icon: mdi:cctv
    show_background: false
    tap_action:
      action: navigate
      navigation_path: "#security"
    hold_action:
      action: none
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: none;
  }
  .bubble-sub-button {
    height: 35px !important;
    width: 35px !important;
  }
  .bubble-sub-button-1 {
    background-color: ${hass.states['input_boolean.silent_mode'].state !== 'off' ? '#d21f3c' : 'transparent'} !important;
  }
  .bubble-sub-button-1 {
    color: ${hass.states['input_boolean.silent_mode'].state !== 'off' ? 'white' : ''} !important;

   ${subButtonIcon[0].setAttribute("icon", hass.states['input_boolean.silent_mode'].state === 'off' ? 'mdi:volume-high' : 'mdi:volume-mute')}
  }    
  .bubble-sub-button-2 {
    opacity: 1 !important;
    background-color: ${hass.states['climate.heat_pump'].state === 'heat' ? '#d22b2b' 
      : hass.states['climate.heat_pump'].state === 'cool' ? '#ADD8E6'
      : hass.states['climate.heat_pump'].state === 'fan_only' ? '#808080'
      : ''} !important;
  }
  .bubble-sub-button-2 {
    opacity: 1 !important;
    color: ${hass.states['climate.heat_pump'].state === 'heat' ? 'white' 
    : hass.states['climate.heat_pump'].state === 'cool' ? 'black'
    : hass.states['climate.heat_pump'].state === 'fan_only' ? 'white'
    : ''} !important;

   ${subButtonIcon[1].setAttribute("icon", hass.states['climate.heat_pump'].state === 'heat' ? 'mdi:fire' :
   hass.states['climate.heat_pump'].state === 'cool' ? 'mdi:snowflake' :
   hass.states['climate.heat_pump'].state === 'fan_only' ? 'mdi:fan' :
   'mdi:heat-pump-outline')} 
  }
  .bubble-sub-button-3 {
    opacity: 1 !important;
    background-color: ${hass.states['input_boolean.away_mode'].state === 'on' ? '#52b2bf' 
      : hass.states['input_boolean.away_mode'].state === 'off' ? ''
      : ''} !important;
  }
  .bubble-sub-button-3 {
    opacity: 1 !important;
    color: ${hass.states['input_boolean.away_mode'].state === 'on' ? 'white' 
      : hass.states['input_boolean.away_mode'].state === 'off' ? ''
      : ''} !important;

   ${subButtonIcon[2].setAttribute("icon", hass.states['input_boolean.away_mode'].state === 'off' ? 'mdi:home' : 'mdi:home-export-outline')}
  }  
  .bubble-sub-button-container {
    width: 100%;
    justify-content: space-between !important;
  }
  .bubble-sub-button-icon {
    --mdc-icon-size: inherit !important;
  }
  .bubble-name-container {
    margin-right: 0px !important;

• Do you also experience this on a PC? Yes, it has the same behavior on PC.

• On the gif, I can't see what you're clicking next time check the box for touch representation. Please find another recording with the touch-enabled. hopefully that is enough https://github.com/user-attachments/assets/508cf227-60a0-41c0-bd1a-a13f38c20e75

[MrBearPresident]

Just letting you know, I tried your code. I couldn't reproduce your issue. Tested on multiple devices and multiple HA-servers with multiple versions of bubble-card.

You only have this issue on the mute button of that card? Can make a new one and test it if you have it there aswell?

type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Mute
    entity: input_boolean.silent_mode
    tap_action:
      action: toggle
    hold_action:
      action: more-info

Some extra remarks, Can you check and remove these unnecessary yaml lines: for toggle, nav_path is not needed. for toggle, service is not needed.

[ElementZoom]

Thank you, have removed the unnecessary lines and added a new card with just the above codes and can confirm that the issue is still persisted.

It only started happening last week I believe. Is there anything else there we can try to fix the issue?

[MrBearPresident]

Can you try this:

type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Mute
    entity: input_boolean.silent_mode
    tap_action:
      action: toggle
    hold_action:
      action: none

[ElementZoom]

Can you try this:

type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Mute
    entity: input_boolean.silent_mode
    tap_action:
      action: toggle
    hold_action:
      action: none

Yes I have and it gave me same behavior

[MrBearPresident]

with hold-action: none ???

[ElementZoom]

with hold-action: none ???

Hi I just did another test. with hold-action: none, tap_action and double_tap_action work as intended. However when hold_action is set with more-info, those taps will activate the hold_action action.

[MrBearPresident]

Other question, because you tell me you also have this issue when on a pc. How fast is your pc and how fast is you mobile phone? The only way I'm (kinda) able to recreate it. (But not consistently.) Is when Iimit my CPU to x20 or higher. But at that point the whole ui (even without bubbel cards) gets unusable.

[ElementZoom]

Other question, because you tell me you also have this issue when on a pc. How fast is your pc and how fast is you mobile phone? The only way I'm (kinda) able to recreate it. (But not consistently.) Is when Iimit my CPU to x20 or higher. But at that point the whole ui (even without bubbel cards) gets unusable.

PC is i3-1115g4 and phone is Samsung Galaxy S23+

Prior to this, I never had this issue. Everything was working as expected and hasn't been fixed until now. Not sure if this is HA OS issue or the bubble card specific issue.

[Clooos]

Hi! I'm also unable to reproduce this issue, have you tried the latest release? (v2.3.4-beta.1)

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[ElementZoom]

Hi! I'm also unable to reproduce this issue, have you tried the latest release? (v2.3.4-beta.1)

Hi, I just tried the beta version suggested and the problem still persisted. I also have tried to create the silent button only in a new dashboard from scratch, and it is still has the same issue. single tap to the button and it brought me to the more-info screen.

my code is below:

type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
  - name: Mute
    tap_action:
      action: toggle
    entity: input_boolean.silent_mode
    hold_action:
      action: more-info
styles: |
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-button-card-container {
    background: none;
  }
  .bubble-sub-button {
    height: 35px !important;
    width: 35px !important;
  }
  .bubble-sub-button-container {
    width: 100%;
    justify-content: space-between !important;
  }
  .bubble-sub-button-icon {
    --mdc-icon-size: inherit !important;
  }
  .bubble-name-container {
    margin-right: 0px !important;

[andrew-wylie]

I'm also getting this. What I'm thinking, there is obviously code which handles the hold action...and I am assuming this is part of Home Assistant, not bubble-card? I had a look in F12 dev and at the src, for the mousedown event for the subbutton. Not sure why it would be ignored/unknown....

Not knowing if this is a bubble-card recent update issue, or a recent HA update issue.

This is an OBS recording of the issue (mkv file inside). Ignore the visibly controlled items showing on the right, those appear when the lights are on. It's the default more-info from HA that is now appearing on tap...hold should not be showing it. 2025-01-29 13-22-29.zip

  - type: custom:bubble-card
    entity: group.master_bedroom_all_lights
    card_type: button
    name: MBedroom
    icon: mdi:ceiling-light
    sub_button:
      - entity: group.master_bedroom_night_lights
        icon: mdi:led-strip-variant
        tap_action:
          action: toggle
        double_tap_action:
          action: none
        hold_action:
          action: more-info
    styles: |
      .bubble-sub-button-1 {
        background-color: ${hass.states['group.master_bedroom_night_lights'].state === 'on' ? '#AD6700' : '#1C1C1C'} !important;
      }
    tap_action:
      action: none
    double_tap_action:
      action: none
    hold_action:
      action: none
    button_action:
      tap_action:
        action: none
      double_tap_action:
        action: none
      hold_action:
        action: none

[andrew-wylie]

CC: @reylinux

Ok. I resolved this.

• I uninstalled bubble-card within HACS.
• Then I cleaned out my cache on the browser...this is necessary because HA will still continue to see it and the HACS 'frontend_' still has references.
• Once that was done and the browser then complains about the missing bubble-card reference, I reinstalled it within HACS and reloaded everything and the issue is no longer there.

[andrew-wylie]

Note, I cannot get the ios companion HA app to work though...it still exhibits this problem. I tried resetting its front end cache, but that didn't fix it. Going to reinstall the app and see what happens.

[ElementZoom]

CC: @reylinux

Ok. I resolved this.

• I uninstalled bubble-card within HACS.
• Then I cleaned out my cache on the browser...this is necessary because HA will still continue to see it and the HACS 'frontend_' still has references.
• Once that was done and the browser then complains about the missing bubble-card reference, I reinstalled it within HACS and reloaded everything and the issue is no longer there.

Hi, I tried did the same and still have the same issue. It never fixed it for me. I've uninstalled it altogether and stopped using bubble card

[andrew-wylie]

Sigh, the issue has returned on the browser side again.

[umarino]

Hi All, i have the same issue, on my Samsung S22 Ultra and on my PCs too. When i tap on a button, it seems the card activate all the triggers (tap, double tap, hold). This appens from about a week, I'm not sure, may be after the last bubble card update.

[andrew-wylie]

@Clooos Something in the tap-action.js is triggering the 'hold' timer. You can see (after it has performed the tap), it thinks it needs to perform the 'hold' !== 'none'. Is the timer finishing too quickly?

[Clooos]

This issue is in my priorities for the next release, thank you for all your feedback!

[Clooos]

Hi everyone here, I've tried to fix this in the latest betas, can anyone tell me if it's now working as expected? Because I was unable to reproduce this, and I'm still unsure of what is causing this.

https://github.com/Clooos/Bubble-Card/releases/tag/v2.5.0-beta.5

[umarino]

Hi everyone here, I've tried to fix this in the latest betas, can anyone tell me if it's now working as expected? Because I was unable to reproduce this, and I'm still unsure of what is causing this.

https://github.com/Clooos/Bubble-Card/releases/tag/v2.5.0-beta.5

Installed the beta, restarted HA, Assigned button action for tap, double tap, hold. Assigned icon action only for tap and Nothing for double tap and hold. Icon tap works, button tap doesn't works :( Tryed on my Galaxy S22 Ultra and on my Lenovo t490 laptop (touchscreen)

https://github.com/user-attachments/assets/6b1147bd-1ca2-42e5-afa4-0c406d048305

[andrew-wylie]

Hi everyone here, I've tried to fix this in the latest betas, can anyone tell me if it's now working as expected? Because I was unable to reproduce this, and I'm still unsure of what is causing this.

https://github.com/Clooos/Bubble-Card/releases/tag/v2.5.0-beta.5

Yea still not working

  - entity: button.wake_on_lan_3c_7c_3f_f3_03_76
    icon: mdi:lan-check
    tap_action:
      action: toggle
    double_tap_action:
      action: none
    hold_action:
      action: more-info

When this hold_action is set, clicking the button kicks off the toggle AND the more-info.

[andrew-wylie]

This is resolved for me in v2.5.0-beta.8

[Clooos]

Yeah! Thank you for the feedback!

[umarino]

Yeees, resolved for me in v2.5.0-beta.8 too. Many Thanks to the boss Clooos.