[OutSystems UI] Android Back Button interferes with Action Sheet
outsystems-ui
Reactive icon
Forge component by Platform Maintenance

I'm using the built-in Action Sheet from Outsystems UI in a native Android app. When the android back button is pressed, I toggle the action sheet and display two buttons for saving or discarding changes to a form. There is an issue, and here's the exact scenario:

Pressing the back button opens the action sheet. Pressing one of the buttons in the action sheet checks whether a form is valid and, if not, closes the sheet and shows the validation messages for the required inputs. If I click the android back button again, the action sheet comes back up. This time, if I press the "built-in" cancel button, the action sheet freezes and shows a different style with a white background.

Anyone recognize this scenario?


Hi Johan Åström,

Can you share an oml with that use case? That way we can check it happen and identify if it's an issue at ActionSheet.

Cheers,  
JR

Unfortunately not, it's a client's project!

Kindly,

Johan

Sorry for the confusion...
I was not asking for the client module but for a new one with that "issue" happening. Can you replicate that behaviour and share it? Otherwise it will be difficult to properly understand it..

Again, thank you!

Cheers,
JR

Ah, of course :) Here's an OML with an exact copy of the action sheet, which is, in turn, an exact copy of the one from Outsystems UI (the css is not present, though).

The app needs to be distributed as a native app to reproduce the issue. We're using the "Android back button" forge component to handle the trigger of the back button.

The issue can be recreated by clicking the "Click here" link on the landing page. Then hit the android back button + the middle button "Spara som utkast". The action sheet should close. Next, hit  the android back button + the cancel button labeled "avbryt"; this should reproduce the bug.

ActionSheetBugReplication.oml

Thank you!

We'll take a look and let you know about our findings.

Cheers,
JR

Hi Johan Åström,

Was looking into oml you shared and notice the action sheet is on other module I do not have.
1. Are you using a clone of the ActionSheet?
2. If not can you please move that block into the module you shared in order to be able to publish it and test it?

Thank you,

Cheers,
JR



My apologies!
Here is a version with the block in the same module.

Yes, we are using a clone since we had to customize the text on the "cancel"-button. Other than that, nothing is changed from the Outsystems UI version. Also, I should add that we see the same behaviour when we have used the Outsystems UI version directly instead of a clone.


ActionSheetBugReplication.oml

No worries, 

Can you please remove the all the external dependencies (image attached) and reproduce the issue?
Looking into the module you've a "custom" back button for android, however remove all this dependencies and if you are able to reproduce it just let me know and share that oml please.

Thanks again,

Cheers,
JR

Screenshot 2022-04-20 at 08.51.34.png

Unfortunately, we need that dependency to be able to open the action sheet when the back button is clicked - this is a requirement from the customer. Without it, when pressing the back button, one is simply redirected to the previous screen without the sheet being opened.

Ok, but can you add that button at oml as well and be able to reproduce the issue? Om other words are you able to isolate all the logic from external assets and reproduce it?

I'am asking it in order to understand if the issue won't be at that logic and try to isolate things, otherwise I can't reproduce the issue and that way I can't help :( 

Cheers,
JR

Aah, got it! Double checked now, here all the dependencies should be in the same module, aside from the out-of-the-box ones from Outsystems :)

Thank You!

ActionSheetBugReplication.oml

Managed to solve this by disabling the "FocusActiveDOMElement" Javascript in the "OnCancelClick" action of the action sheet. Seems to be an issue with the focus() function. 

Hi, 

First of all, sorry for the delay on answering you!

So, based on my tests the issue is related with UnMoveElement client action you added, since you are using a timeout to remove elements, the removeChild will fall in issue because elements has been removed already. ("Failed to execute 'removeChild'") is the console error message I got.

When you change page all the elements in page will be destroyed, so in small words, we're trying to remove elements that are not there already. If you really want to do this logic you should verify if the element is there yet before running this remove child logic.

Cheers,
JR

Screenshot 2022-04-26 at 11.33.35.png

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