Tap action on icon issue #990

reylinux · 2024-12-04T02:31:32Z

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:

Go to any sub button
Set the tap for toggle
Set the hold for more info
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 · 2024-12-07T21:52:18Z

Could you make a gif/video from your issue?

reylinux · 2024-12-07T22:02:49Z

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 · 2024-12-09T08:24:18Z

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 · 2024-12-09T22:31:37Z

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 · 2024-12-10T05:00:51Z

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 · 2024-12-12T07:04:36Z

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 · 2024-12-12T08:20:21Z

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 · 2024-12-12T08:22:21Z

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 · 2024-12-12T08:23:44Z

with hold-action: none ???

reylinux · 2024-12-13T00:54:22Z

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 · 2024-12-16T08:41:08Z

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 · 2024-12-19T20:45:42Z

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 · 2024-12-22T12:14:26Z

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

github-actions · 2025-01-05T12:35:18Z

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.

reylinux · 2025-01-08T00:22:02Z

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 · 2025-01-29T21:33:29Z

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 · 2025-01-29T23:17:22Z

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 · 2025-01-30T17:27:19Z

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.

reylinux · 2025-01-30T17:35:12Z

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 · 2025-01-30T20:43:17Z

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

umarino · 2025-02-02T18:23:03Z

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 · 2025-02-05T07:45:23Z

@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 · 2025-02-05T19:46:29Z

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

- [x] Added js-yaml as dependency - [x] Editor styling improvements #1214 - [x] Link to share modules on GitHub in the editor - [x] Rename bubble-custom to bubble-module - [x] Get modules config from this.config - [x] Review ha-alert (alert when not copied in the right folder) - [x] Fixed an issue with modules in combination with the text scrolling effect - [x] Attempt to fix « Tap action on icon issue #990 » - [x] No need to clear cache anymore to apply module modifications - [x] Custom templates can be now placed anywhere and not only after custom styles - [x] Fixed some styling issues in the Home Assistant default styling module - [x] Fixed the pop-up compatibility with the new custom styles system - [x] Fixed some incompatibility issues in the cleanCSS function - [x] Better « How to use » in bubble-modules.yaml - [x] The new custom styles/template system handle name/state changes correctly - [x] And maybe more…

Clooos · 2025-02-15T11:57:53Z

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 · 2025-02-15T12:11:08Z

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)

Screen_Recording_20250215_130841_Home.Assistant.mp4

andrew-wylie · 2025-02-15T20:26:25Z

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.

reylinux added the bug Something isn't working label Dec 4, 2024

MrBearPresident added the needs-more-information label Dec 16, 2024

github-actions bot removed the needs-more-information label Dec 19, 2024

Clooos added the needs-more-information label Dec 22, 2024

github-actions bot added stale and removed needs-more-information labels Jan 5, 2025

github-actions bot removed the stale label Jan 8, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tap action on icon issue #990

Tap action on icon issue #990

reylinux commented Dec 4, 2024 •

edited

Loading

MrBearPresident commented Dec 7, 2024

reylinux commented Dec 7, 2024

MrBearPresident commented Dec 9, 2024

reylinux commented Dec 9, 2024

MrBearPresident commented Dec 10, 2024

reylinux commented Dec 12, 2024

MrBearPresident commented Dec 12, 2024 •

edited

Loading

reylinux commented Dec 12, 2024

MrBearPresident commented Dec 12, 2024

reylinux commented Dec 13, 2024

MrBearPresident commented Dec 16, 2024

reylinux commented Dec 19, 2024

Clooos commented Dec 22, 2024

github-actions bot commented Jan 5, 2025

reylinux commented Jan 8, 2025 •

edited

Loading

andrew-wylie commented Jan 29, 2025 •

edited

Loading

andrew-wylie commented Jan 29, 2025

andrew-wylie commented Jan 30, 2025

reylinux commented Jan 30, 2025

andrew-wylie commented Jan 30, 2025

umarino commented Feb 2, 2025

andrew-wylie commented Feb 5, 2025

Clooos commented Feb 5, 2025

Clooos commented Feb 15, 2025

umarino commented Feb 15, 2025 •

edited

Loading

andrew-wylie commented Feb 15, 2025

Tap action on icon issue #990

Tap action on icon issue #990

Comments

reylinux commented Dec 4, 2024 • edited Loading

MrBearPresident commented Dec 7, 2024

reylinux commented Dec 7, 2024

MrBearPresident commented Dec 9, 2024

reylinux commented Dec 9, 2024

MrBearPresident commented Dec 10, 2024

reylinux commented Dec 12, 2024

MrBearPresident commented Dec 12, 2024 • edited Loading

reylinux commented Dec 12, 2024

MrBearPresident commented Dec 12, 2024

reylinux commented Dec 13, 2024

MrBearPresident commented Dec 16, 2024

reylinux commented Dec 19, 2024

Clooos commented Dec 22, 2024

github-actions bot commented Jan 5, 2025

reylinux commented Jan 8, 2025 • edited Loading

andrew-wylie commented Jan 29, 2025 • edited Loading

andrew-wylie commented Jan 29, 2025

andrew-wylie commented Jan 30, 2025

reylinux commented Jan 30, 2025

andrew-wylie commented Jan 30, 2025

umarino commented Feb 2, 2025

andrew-wylie commented Feb 5, 2025

Clooos commented Feb 5, 2025

Clooos commented Feb 15, 2025

umarino commented Feb 15, 2025 • edited Loading

andrew-wylie commented Feb 15, 2025

reylinux commented Dec 4, 2024 •

edited

Loading

MrBearPresident commented Dec 12, 2024 •

edited

Loading

reylinux commented Jan 8, 2025 •

edited

Loading

andrew-wylie commented Jan 29, 2025 •

edited

Loading

umarino commented Feb 15, 2025 •

edited

Loading