search

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

SideDrawer overlays previous screen in "back" transition #1333

Closed facetious closed 4 years ago

facetious commented 4 years ago

Tell us about the problem

When using the nativescript-ui-sidedrawer on a secondary page, navigating back causes an undesirable overlay during the transition.

sidedrawer overlay present during transition

https://play.nativescript.org/?template=play-ng&id=FCb2Wp&v=2

Which platform(s) does your issue occur on?

iOS

It does not appear to be an issue on Android with default transitions as there is no sideways slide.

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

This is the device info reported in the NativeScript Playground "Devices" section.

{
  "@angular/animations": "8.2.14",
  "@angular/common": "8.2.14",
  "@angular/compiler": "8.2.14",
  "@angular/core": "8.2.14",
  "@angular/forms": "8.2.14",
  "@angular/platform-browser": "8.2.14",
  "@angular/platform-browser-dynamic": "8.2.14",
  "@angular/router": "8.2.14",
  "@nativescript/angular": "8.20.3",
  "@nativescript/core": "6.3.1",
  "@nativescript/theme": "2.2.1",
  "@progress-nativechat/nativescript-nativechat": "3.0.0",
  "kinvey-nativescript-sdk": "4.2.5",
  "nativescript-accelerometer": "3.0.0",
  "nativescript-angular": "8.20.3",
  "nativescript-background-http": "4.2.1",
  "nativescript-camera": "4.5.0",
  "nativescript-geolocation": "5.1.0",
  "nativescript-image": "2.2.5",
  "nativescript-imagepicker": "7.1.0",
  "nativescript-intl": "3.0.0",
  "nativescript-iqkeyboardmanager": "1.5.1",
  "nativescript-social-share": "1.5.2",
  "nativescript-theme-core": "1.0.6",
  "nativescript-ui-autocomplete": "6.0.0",
  "nativescript-ui-calendar": "6.0.0",
  "nativescript-ui-chart": "7.1.0",
  "nativescript-ui-dataform": "6.0.0",
  "nativescript-ui-gauge": "6.0.0",
  "nativescript-ui-listview": "8.0.1",
  "nativescript-ui-sidedrawer": "8.0.0",
  "nativescript-vue": "2.4.0",
  "react": "16.12.0",
  "react-hot-loader": "4.12.18",
  "react-nativescript": "0.17.0",
  "reflect-metadata": "0.1.13",
  "rxjs": "6.5.3",
  "rxjs-compat": "6.5.3",
  "svelte": "3.16.4",
  "svelte-native": "0.7.2",
  "tns-core-modules": "6.3.1",
  "zone.js": "0.10.2"
}

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

When a SideDrawer is added to a view that is not the root of the stack, attaching a "back" action within the SideDrawer causes the navigation to slide sideways and the drawer to slide in the opposite direction at the same time. The drawer's viewport is not clipped to the screen that it was originally attached to. It appears as though it is disconnected from its original view hierarchy and added to the root window or something, meaning that any clipToBounds doesn't apply appropriately to solve the issue.

The attached Playground exhibits the issue. Tap "go there", then "Open Drawer", then "go back".

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

https://play.nativescript.org/?template=play-ng&id=FCb2Wp&v=2

facetious commented 4 years ago

I worked around this issue by changing the transition to a fade prior to executing the back navigation, but this should still be fixed so that a workaround isn't needed.

NickIliev commented 4 years ago

@facetious the latest version of the drawer is meant to be used only as a root component. You can still disable/enable as done here and this way you will have a drawer only where it is needed.