Cannot toggle row by tapping on mobile when clickable is set to true

mateuszdrab commented 2 years ago

My Home Assistant version: 2021.11.5

Fold-entity-row version (FROM BROWSER CONSOLE): 20.0.12

What I am doing: Setting a row with the clickable property set to true. Don't want to see the overall group details pane.

What I expected to happen: On both mobile and PC, the row should unfold, tapping the toggle should toggle the group/switch.

What happened instead: Tapping the row works fine and it unfolds however tapping the toggle does nothing on mobile (tried on an iPhone and Android device) in the home assistant app. I am unable to toggle the group group.ambientlights. On PC, everything works fine.

I've gone ahead and disabled each lovelace module to make sure none conflict and this behavior didn't change. It is only resolved when "clickable: true " is removed. Minimal steps to reproduce:

type: entities
title: Light Control
entities:
  - type: custom:fold-entity-row
    head:
      entity: group.ambientlights
      secondary_info: last-changed
      name: Ambient Lights
    clickable: true
    entities:
      - entity: ...
      - entity: ...

Error messages from the browser console: Unable to check on mobile

By putting an X in the boxes ([X]) below, I indicate that I:

[x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[x] Have made sure I am using the latest version of the plugin.
[x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

ildar170975 commented 2 years ago

Tried on iPad Air 2 (iOS 15.0.2), I confirm the issue:

type: entities
entities:
  - type: custom:fold-entity-row
    open: false
    clickable: true
    padding: 0
    head:
      entity: input_boolean.test_boolean
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun

The toggle cannot be toggled. It can if clickable: false.

ildar170975 commented 2 years ago

As for iPhone 5s (iOS 12.5.5) - the card is not displayed properly (see the code fro the previous post). This card is the 1st on the page, all other cards below simply are not displayed. https://github.com/thomasloven/lovelace-fold-entity-row/issues/198

thomasloven commented 2 years ago

clickable: true is meant as a workaround for exceptional cases. When you can, you should use

tap_action:
  action: fire-dom-event
  fold_row: true

instead.

I have update the readme to clarify this.

ildar170975 commented 2 years ago

This example still not working on iPad Air 2 (iOS 15.0.2): the card is displayed properly, it folds/unfolds, the toggle cannot be changed.

Strange - sometimes I manage to change the toggle! It happens in ~1 case from 20. I am tapping on the toggle, it is getting a "ripple effect" but does not change. And in case if iPhone 5S (which has an old iOS 12.5.5) the toggle changes a bit more often (let's say "~1 case from 10").

thomasloven commented 2 years ago

That example still isn't using tap_action, though...

ildar170975 commented 2 years ago

This example - I cannot fold/unfold by tapping on the PC (Win10, Chrome)

type: entities
entities:
  - type: custom:fold-entity-row
    open: false
    tap_action:
      action: fire-dom-event
      fold_row: true
    padding: 0
    head:
      entity: input_boolean.test_boolean
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun

thomasloven commented 2 years ago

type: entities
entities:
  - type: custom:fold-entity-row
    open: false
    padding: 0
    head:
      entity: input_boolean.test_boolean
      tap_action:
        action: fire-dom-event
        fold_row: true
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun

ildar170975 commented 2 years ago

Oh, I misplaced the tap_action. Thanks a lot, Thomas! Unfolds fine on PC, iPad, iPhone.

mateuszdrab commented 2 years ago

clickable: true is meant as a workaround for exceptional cases. When you can, you should use
tap_action:
  action: fire-dom-event
  fold_row: true
instead.

I have update the readme to clarify this.

Thanks! Will check it out in a bit. So many things on my to-do 😁

thomasloven / lovelace-fold-entity-row

Cannot toggle row by tapping on mobile when clickable is set to true #197

Error messages from the browser console: Unable to check on mobile