ProgressNS / nativescript-ui-feedback

This repository is used for customer feedback regarding Telerik UI for NativeScript. The issues system here is used by customers who want to submit their feature requests or vote for existing ones.
Other
115 stars 21 forks source link

RadSideDrawer Android: custom frame + TextField conflicting activityBackPressedEvent #1515

Open felixkrautschuk opened 3 years ago

felixkrautschuk commented 3 years ago

Please take a minute to read our NativeScript Code of Conduct before proceeding with posting issues or discussing. The purpose of this guide is to make communication and cooperation within our forums a pleasure for you and the other members.

Please, provide the details below:

Tell us about the problem

When using a custom frame as the drawer content and the page within that frame has a TextField, the activityBackPressedEvent-handling is not working correctly anymore.

When the user focusses the TextField and then taps a button to navigate the frame (inside RadSideDrawer) forwards and then taps the device back-button, the frame is not navigated back as expected and the activityBackPressed-Event is not called as expected. Instead the drawer is just getting closed. See the GIF for more details:

android-drawer-back-issue

Here are the most important snippets of the app (there is a complete sample app provided below)

<!-- main-page.xml -->
<nsDrawer:RadSideDrawer loaded="onMenuDrawerLoaded" drawerClosed="onDrawerClosed">
        <nsDrawer:RadSideDrawer.drawerContent>
            <GridLayout rows="*" columns="*">
                <Frame id="frameRadSideDrawer" defaultPage="frame-drawer-default-page"/>
            </GridLayout>
        </nsDrawer:RadSideDrawer.drawerContent>

        <nsDrawer:RadSideDrawer.mainContent>
            <GridLayout rows="*">
                <Label text="Home page" horizontalAlignment="center" verticalAlignment="center"/>
            </GridLayout>
        </nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>
<!-- frame-drawer-default-page.xml  -->
<Page backgroundColor="yellow">
    <ActionBar title="Drawer frame default page"/>

    <StackLayout>
        <TextField text="" hint="Text..."/>
        <Button text="Navigate drawer frame to detail-page" tap="navigateDrawerFrameToDetailPage"/>
    </StackLayout>
</Page>
//app.ts
Application.android.on(AndroidApplication.activityBackPressedEvent, (args: AndroidActivityBackPressedEventData) => {
    alert("android activity back pressed event!");
});

Application.run({ moduleName: 'app-root' });

Which platform(s) does your issue occur on?

Android Issue occurs on all tested Android versions 5 - 11, but behaviour is a little bit different comparing Android 5 - 8 and Android 9+

Please provide the following version numbers that your issue occurs with:

Please tell us how to recreate the issue in as much detail as possible.

  1. Start the application ..
  2. tap the "open drawer" ActionItem to open the drawer from the bottom
  3. tap the button to navigate the drawer-frame to the detail-page
  4. tap the device back-button to navigate the drawer frame back to its default-page
    • the back-navigation works as expected and the alert coming from the activityBackPressed-Event is shown as expected
  5. now tap into the TextField to open the keyboard
  6. tap the button again to navigate the drawer-frame to the details-page (it's you choice to tap the button directly or closing the keyboard manually at first)
  7. tap the device back-button again
    • instead of navigating the drawer frame back and showing the activityBackPressed-alert, the drawer is getting closed!
  8. open the drawer again and tap the button without focussing the TextField, tap the back-button
    • the back-button behaviour is still broken!

On Android 9+, I can bring the correct behaviour back when suspending and resuming the app, this "workaround" does not work for Android 8 and previous versions.

This issue is related to the RadSideDrawer and not to custom frames in general, as you can see that everything is working as expected, if that custom frame is located in a usual page (outside of RadSideDrawer content):

android-frame-back-correct

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

ns-android-back-issue.zip

felixkrautschuk commented 3 years ago

I just noticed, that the issue does not occur when setting gesturesEnabled="false" in the loaded event for the RadSideDrawer component (when setting that in XML, it has still no effect).