[OutSystems UI] iOS issue with Floating Actions
Question
Forge component by OutSystems R&D

I have found a difference in behavior in the Floating Actions widget in relation with iOS and Android.

We have created an PWA app that will be used on Android, iOS and Windows (via Edge with Chromium). In this app I have placed a Floating Actions with IsHover set to True (easier for Windows users). 

You then get the behavior as follows;

Windows: When you hover over the Floating Action with you mouse the action open. No issue here.
Android: When you tab the Floating Action it opens but to close it you must click on a different part of the screen then where the Floating Action is. Strange but workable.
iOS: Clicking on the Floating Action doesn't do anything. When you keep your finger on the Floating Action the browser thinks you want to perform a Select All. This is an issue for my consumers.

Please note that my main issue is the difference in behavior between Android and iOS.

Demo:

I created a demo app (attached) that demonstrated this issue. You can also use the following QR Code or use this link to open the demo app on the device 

Workaround:

I have found a workaround, this workaround is demo'd in screen 3 "Dynamic Detection". For the IsHover property I use the following statement to enable Hover for Windows but disable it for mobile devices: "not IsPhone()". This fixes it for my consumers but skips over the fact that tablets has the same issue and not all of them have mouse support.

Suggested solution:

I think that the widget should check if it's running on a phone (or tablet without a mouse) and if it is, force itself to disable IsHover. Note that pen support isn't good enough as that is not detected as an onHover by the browser (Tested with an iPad Pro). 


Greetings,

Vincent

Hi Vincent Koning,


Thanks for the feedback! 

In fact, we were already looking into fixing this on a new version of the Floating Actions.


Best regards,

Bernardo Cardoso

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.