Tap action on icon issue

[reylinux]

Describe the bug
I have sub-buttons and set up a tap for toggle and hold for more info. After the latest update, both actions are done together. So the button will toggle and go to the entity details. It used to only toggle when one single tap is made. It also is the same behavior for navigate. It navigates to the correct directory then open the entity details

To Reproduce
Steps to reproduce the behavior:

1. Go to any sub button
2. Set the tap for toggle
3. Set the hold for more info
4. Click the button

Expected behavior
Tap action for toggle should toggle the button, not toggle then go to the specific entity.

YAML

sub_button:
  - name: Mute
    tap_action:
      action: toggle
      service: input_boolean.toggle
    entity: input_boolean.silent_mode
    hold_action:
      action: more-info

Additional comments
For the above code, when I click the Mute button, it toggles the input_boolean.silent_mode and go to that entity details

Information (please complete the following information):

• OS: Android
• Companion App
• Bubble Card version: 2.3.0
• Home Assistant version: core-2024.11.3

Thank you! 🍻

[MrBearPresident]

Could you make a gif/video from your issue?

[reylinux]

Could you make a gif/video from your issue?

Screen_Recording_20241208_105928_Home.Assistant.mp4

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)
  

[reylinux]

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

[reylinux]

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

[reylinux]

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 ???

[reylinux]

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.

[reylinux]

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)