Android Navigation Back gesture activates buttons on dashboard

[Tau-Neutrino]

Home Assistant Android version:
2021.10.0-full

Android version:
Android 12 (SPA1A.210812.015)

Phone model:
Pixel 4a

Home Assistant version:
core-2021.10.6

Last working Home Assistant release (if known):
all affected

Description of problem:
The android back gesture seems to activate the button which is present below the trace of the finger while performing the gesture (on finger lift-off).
This is not the case for other apps i tested (e.g outlook, twitter, calculator, etc), therefore it seems to be an issue with the app.

Screenshot of problem:
Here is a screen record, which shows the issue (around 5 sec at the shield icon, which triggers the error message on the bottom):
https://photos.app.goo.gl/BT5ZShqgiFELMuxn7

[dshokouhi]

I do not have this issue on my Pixel 4 XL on both android 11 and 12 do you see this issue in Chrome for Android? The apps that you mention are not webview apps so are not a fair comparison.

Also check that Android system webview and Chrome are both up to date. Disable any and all custom cards as well to see if those cause an issue.

[Tau-Neutrino]

issue is not present in Chrome.

WebView & Chrome Version: 94.0.4606.85

Intresstingly the issue only seems to be there if I use the back gesture from the right side of the phone --> a back swipe from the left side is working as it should be. Furthermore, I also noticed that i do not actualy have to lift the finger in most cases --> just tracing over the button is activating it.

[dshokouhi]

What do you mean by activate? Just that the button highlights? Is it only on those button cards? What about entity card?

[Tau-Neutrino]

Checked:
Problem does not occur with entity cards.
By "activate" i am referring to the activation of the "tab-action", eg a light is turned on if the tab-action of a the button is set to "toogle".

[dshokouhi]

Ok then yes this is definitely a frontend issue and not an app issue

[github-actions]

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 Home Assistant 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.

[patriiiiiiiiiick]

This issue is present with 2021.12.10.

[akusokuzan]

I've noticed this as well. My phone did just update to andriod 12 recently but also home assistant did an update as well. I'm gonna roll back to last month or so and see if the problem persist. This is what happens to me. I swipe up and the button I'm on in home assistant or light whatever will turn on or off like i clicked it but also andriod will go home or back whatever gesture I did.

[DuckyCrayfish]

I have this issue and it is quite frustrating. I've turned on the lights on sleeping roommates more than once because of it. Oops.

[tombadog99]

Also having this issue on pixel 5 on Android 12. Really frustrating - hopefully can be fixed soon!

[leranp]

Same here, Samsung S20 , Android 12

[leranp]

Any update?

[v6ak]

I've researched a bit and this seems to be relevant: https://developer.android.com/training/gestures/gesturenav

While the link to WindowInsets.getMandatorySystemGestureInsets() sounds to be relevant just for home/switch gestures, it might be a solution for back as well. Probably, we don't just want to see mandatory (=IIUC home/switch, as you can't disable it) gestures insets, but all gestures insets: https://developer.android.com/reference/android/view/WindowInsets#getSystemGestureInsets() . (I know, this is deprecated, but there is a followup.)

Once we are able to get the insets, the question is how to implement it:

a. Implement it in the companion app. This would probably mean the app would have to reduce the size of the WebView.
b. Implement it in the webinterface. This would require the companion app to pass the insets to the webpage.

[patriiiiiiiiiick]

@v6ak the back from the left does work as intended. Only the back gesture on the right side is problematic. It means there is an implementation in place, only partial, doesn't it?

[v6ak]

Well, this might be purely accidental. If a margin is wide enough for whatever reason, it should be OK. It seems that left margin is a bit wider than the right one. Anyway, it doesn't imply the implementation is correct – the required and actual margins might vary by device, settings etc. So, it might break on some other device, new Android version etc. I've also seen that the safe insets are available in CSS, so there is no need to pass them from the companion app: https://developer.mozilla.org/en-US/docs/Web/CSS/env

[tombadog99]

Still an issue in Android 13 and still really annoying.

[ArkadiuszNiemiec]

It's even worse on Samsungs three button gestures. All gesture types trigger a click.

[VNRARA]

@Tau-Neutrino your photos link is broken.

[jwildman16]

Just want to add that I experience this consistently in Android 13 on a Google Pixel 6a. It has turned off my heat on a few occasions, which has the potential to lead to frozen and burst pipes in the winter. The two places I know for sure it has happened is on an entities card with light toggles and on a mushroom thermostat card.

[bbloomberg]

Hello! We are also experiencing this bug and it's very frustrating!

[TheYves]

Same issue here with my Samsung Android phone. Very often, when I try to close the app with swiping up from the bottom, I accidentally turn on/off some lights or open/close blinds. Often times I don't even realize it. This is very frustrating.

This does not happen when I use Home Assistant in Chrome on my Android, just in the Home Assistant Android app.

[Igor01-Tech]

I can also confirm that this is an issue of the HA app. When navigating back in chrome, no HA buttons will be pressed. In the HA app I toggle buttons all the time when swiping back.
Please fix :)

[iDontWantAUsername]

This also impacts the burger side bar menu (3 lines in the top left). it should be possible to swipe diagonally from the left screen edge to open the side bar menu however this doesn't work in the HA app on Android

[jwildman16]

    layout:
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
      grid-template-rows: auto
      margin: 0px 40px

Yes, thank you, @venator85! I didn't have layout in my dashboard code, so I just added these four lines and the back gesture is no longer triggering switches!

[venator85]

    layout:
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
      grid-template-rows: auto
      margin: 0px 40px

Yes, thank you, @venator85! I didn't have layout in my dashboard code, so I just added these four lines and the back gesture is no longer triggering switches!

You don't need the two lines starting with grid-template, you can remove them 😉

[patriiiiiiiiiick]

This just changed sides for me: it was problematic on the right. It now is on the left side.

I upgraded to Android 14, in case it matters.

[Lackmake]

This is still an issue. Affects both type: button and type: custom:button-card . But it does not affect other types of cards eg entity-switches do not get toggled when I perform the back gesture over them. Since other cards work correctly that should mean that it is fixable for the button card, no?

[RafaelSchridi]

After some experimentations with the app source, I think that this issue is caused by the fact that the back gesture, as soon as it started by the user, causes a touchstart event on the cards, which toggles the card state. This odd behavior looks like a WebView/Android bug to me, so I don't think that the HA app developers can do much about it.

A quick but ugly workaround that I'm currently using is to add a margin to the dashboard content, with a value that is sufficient to have the cards not placed in the edge areas of the screen where the back gesture happens. For example (last line):

title: Home
views:
  - theme: Backend-selected
    path: default_view
    title: Home
    icon: mdi:home-assistant
    type: custom:grid-layout
    subview: false
    layout:
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
      grid-template-rows: auto
      margin: 0px 40px

Sadly doesn't work on bottom swipes if the page is longer than the device view.

[v6ak]

As mentioned earlier (see #3565 (comment) ), it seems to be WebView's feature, not a bug.

…

Message ID: ***@***.***>

[jwildman16]

This just changed sides for me: it was problematic on the right. It now is on the left side.

I upgraded to Android 14, in case it matters.

Same here. Actually, the problem has reappeared on both sides for me, even though I have additional margins added. Screen recording:

screen-20231205-160819.2.mp4

@v6ak
it seems to be WebView's feature, not a bug.

The way I read the subsequent replies is that other webviews don't manage it this way, so it does seem to be specific to Home Assistant.

[CasperVerswijvelt]

This just changed sides for me: it was problematic on the right. It now is on the left side.
I upgraded to Android 14, in case it matters.

Same here. Actually, the problem has reappeared on both sides for me, even though I have additional margins added. Screen recording:

screen-20231205-160819.2.mp4

@v6ak
it seems to be WebView's feature, not a bug.

The way I read the subsequent replies is that other webviews don't manage it this way, so it does seem to be specific to Home Assistant.

As said in my earlier comment (#3565 (comment)), the issue can be reproduced in both chrome and in the home assistant app.

I believe that the 'touchcancel' event is just handled incorrectly in the home assistant frontend

[TheYves]

I'm wondering why the cards listen to three different events (click, touchstart and touchend) in order to trigger the corresponding action. In my opinion, it would be sufficient to only listen to click and maybe touchend.

As far as I understand the problem, the issue comes from the touchstart event:

1. User moves finger from edge of device upwards into the app => touchstart is being triggered, because this is what the event is made for
2. User lifts finger up. Normally this would call touchend, but since Android recognizes this as a "special OS action", it doesn't trigger the touchend event but instead executes the corresponding OS action.
3. Since touchstart has been triggered, the action of the card is being executed.

I haven't tested this, it's just a conjecture. Maybe it's better to just use the click event and don't listen to touchstart/touchend. Or, as previously stated, to handle the touch events correctly, if possible.

[RafaelSchridi]

I'm wondering why the cards listen to three different events (click, touchstart and touchend) in order to trigger the corresponding action. In my opinion, it would be sufficient to only listen to click and maybe touchend.

As far as I understand the problem, the issue comes from the touchstart event:

1. User moves finger from edge of device upwards into the app => touchstart is being triggered, because this is what the event is made for
2. User lifts finger up. Normally this would call touchend, but since Android recognizes this as a "special OS action", it doesn't trigger the touchend event but instead executes the corresponding OS action.
3. Since touchstart has been triggered, the action of the card is being executed.

I haven't tested this, it's just a conjecture. Maybe it's better to just use the click event and don't listen to touchstart/touchend. Or, as previously stated, to handle the touch events correctly, if possible.

That's what I was thinking too, is there any reason to listen to touchstart ?

[Ongion]

The action doesn't actually seem to trigger during touchstart, but during touchend or touchcancel. Both events trigger element.actionHandler.end, which cancels the ripple animation and calls the tap/hold/doubletap event as appropriate.

Why does touchcancel cause the button to trigger the event? The touch was canceled, so at best it should just cancel the ripple animation.

When Android starts the special Back Gesture action, does it send a touchend event, or does it send a touchcancel? I would imagine it sends touchcancel, but I don't know for sure. If it does send touchcancel, then can't we just update the handler to not trigger actions on touchcancel?

[Lackmake]

I didn't look into the source, but can't we just look at the implementation of other cards? Most handle it correctly, for me it's just the button card that's triggered falsely

[Ongion]

I have just done some local testing. Android does send touchcancel when it starts the Back Gesture, and making actionHandler.end return early for touchcancel events gets rid of this problem. I don't know for sure if this causes any other side-effects, but I haven't found any issues so far in my own testing.

[itpeters]

@Ongion any more updates? Assuming things are still working well, are you going to open a PR?

[Lackmake]

Just to bumb this thread again: The 'tile' card has this issue too

[Ongion]

@itpeters So far I haven't had any issues. I'll look into opening a PR with this change, though it may take a bit to get my development environment set up again.

[Ongion]

So, I have a change that I believe would fix this, but I haven't been able to figure out how to run the test suite for frontend in my dev environment. I feel like that's probably a requirement for the PR. I'm going to try to figure this out, but if anyone who has developed for frontend before thinks they can get it done sooner, here's the commit from my fork.

[parkkralle]

Hi, can you give us instructions on how to manually insert the change in HA OS? I can't find the file via SSH or File Editor.

[Ongion]

I was never able to actually test it on the base HomeAssistant frontend controls. When I first encountered this issue, it was with the Custom Button Card entity, which apparently copied or forked this code from HomeAssistant. With that custom control, I was able to manually add this fix, and it worked as I would expect. But I'm not sure where you'd make this change for a base HomeAssistant install. Presumably it's packed together with the rest of frontend.

…

On Sun, Jan 28, 2024, 3:57 AM parkkralle ***@***.***> wrote: Hi, can you give us instructions on how to manually insert the change in HA OS? I can't find the file via SSH or File Editor. — Reply to this email directly, view it on GitHub <#3565 (comment)> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAZDWBRU2MV57WADRI2BZOLYQYHI5BFKMF2HI4TJMJ2XIZLTSSBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDUOJ2WLJDOMFWWLLTXMF2GG2C7MFRXI2LWNF2HTAVFOZQWY5LFUVUXG43VMWSG4YLNMWVXI2DSMVQWIX3UPFYGLAVFOZQWY5LFVIYTGMBQGE3DKMJXG2SG4YLNMWUWQYLTL5WGCYTFNSWHG5LCNJSWG5C7OR4XAZNMJFZXG5LFINXW23LFNZ2KM5DPOBUWG44TQKSHI6LQMWVHEZLQN5ZWS5DPOJ42K5TBNR2WLKJRG44TAMBYGE3THAVEOR4XAZNFNFZXG5LFUV3GC3DVMWVDCNZTGU4TCNBTGQ2YFJDUPFYGLJLMMFRGK3FFOZQWY5LFVIYTGMBQGE3DKMJXG2TXI4TJM5TWK4VGMNZGKYLUMU> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

[michalowskil]

Motorola Edge 30 Neo. Android 13. Home Assistant Core 2023.12.4. Home Assistant Operating System 11.2.

I confirm, swiping up will click the items at the bottom of the dashboard. Doesn't occure when I'm using HA in Chrome. Doesn't occure on other apps I'm using.

[alexeiw123]

So, I have a change that I believe would fix this, but I haven't been able to figure out how to run the test suite for frontend in my dev environment. I feel like that's probably a requirement for the PR. I'm going to try to figure this out, but if anyone who has developed for frontend before thinks they can get it done sooner, here's the commit from my fork.

How has your testing of this gone? It's like having a ghost in our house with us all being on androids that use the back gesture. Does this fix it and if so, can a PR be created?

It's amazing to me that such a glaring UX bug has been present for so long and it doesn't seem to generate any noise!

[dbaq]

Any updates on this? Should we open a linked issue on https://github.com/home-assistant/frontend? Please go upvote the issue on the frontend repository so it can be prioritized: home-assistant/frontend#21042

Adding a 40px margin on both sides does work but we are losing some valuable space.

[mattyway]

So, I have a change that I believe would fix this, but I haven't been able to figure out how to run the test suite for frontend in my dev environment. I feel like that's probably a requirement for the PR. I'm going to try to figure this out, but if anyone who has developed for frontend before thinks they can get it done sooner, here's the commit from my fork.

I have tested the change from this commit and it fixes swiping back on a tile triggering the "tap" behaviour for me. I tested with a Pixel 7 running Android 15 with Home Assistant app version 2024.10.3-full.

Before: https://github.com/user-attachments/assets/5a4aedd0-7013-47e3-9dda-77a66aedfd6c

After: https://github.com/user-attachments/assets/a2fcc3f4-1fd9-4de3-a03e-25b3057c8262

[dbaq]

Shoutout to @mattyway for fixing this!

[dshokouhi]

Wow big shout out there!!! Thank you @mattyway and @Ongion ! As this is fixed I am going to close the bug now. This is merged so will be in HA core 2024.12