Fix scrolling after navigation (#126)

* Fix scrolling after navigation * Update version
DevExpress · Jan 28, 2020 · 142b0ab · 142b0ab
1 parent 3bf85f5
commit 142b0ab
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",

diff --git a/templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.js b/templates/react/application/src/layouts/side-nav-inner-toolbar/side-nav-inner-toolbar.js
@@ -20,6 +20,7 @@ class SideNavInnerToolbar extends React.Component {
       ...this.drawerConfig
     };
 
+    this.scrollViewRef = React.createRef();
     this.menuPatch = menuPreInitPatch(this);
   }
 
@@ -53,7 +54,7 @@ class SideNavInnerToolbar extends React.Component {
               menuToggleEnabled={minMenuSize === 0}
               toggleMenu={this.toggleMenu} />
 
-            <ScrollView className={'layout-body with-footer'}>
+            <ScrollView ref={this.scrollViewRef} className={'layout-body with-footer'}>
               <div className={'content'}>
                 {React.Children.map(this.props.children, item => {
                   return item.type !== Footer && item;
@@ -124,6 +125,10 @@ class SideNavInnerToolbar extends React.Component {
     event.stopPropagation();
   };
 
+  get scrollView() {
+    return this.scrollViewRef.current.instance;
+  }
+
   get drawerConfig() {
     const isXSmall = sizes()['screen-x-small'];
     const isLarge = sizes()['screen-large'];
@@ -150,6 +155,7 @@ class SideNavInnerToolbar extends React.Component {
         pointerEvent.preventDefault();
       } else {
         this.props.history.push(path);
+        this.scrollView.scrollTo(0);
       }
 
       if (this.hideMenuAfterNavigation) {

diff --git a/templates/react/application/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.js b/templates/react/application/src/layouts/side-nav-outer-toolbar/side-nav-outer-toolbar.js
@@ -18,6 +18,7 @@ class SideNavOuterToolbar extends React.Component {
       ...this.drawerConfig
     };
 
+    this.scrollViewRef = React.createRef();
     this.menuPatch = menuPreInitPatch(this);
   }
 
@@ -55,7 +56,7 @@ class SideNavOuterToolbar extends React.Component {
           opened={menuOpened}
           template={'menu'}
         >
-          <ScrollView className={'with-footer'}>
+          <ScrollView ref={this.scrollViewRef} className={'with-footer'}>
             <div className={'content'}>
               {React.Children.map(this.props.children, item => {
                 return item.type !== Footer && item;
@@ -104,6 +105,10 @@ class SideNavOuterToolbar extends React.Component {
     this.setState({ ...this.drawerConfig });
   };
 
+  get scrollView() {
+    return this.scrollViewRef.current.instance;
+  }
+
   get drawerConfig() {
     const isXSmall = sizes()['screen-x-small'];
     const isLarge = sizes()['screen-large'];
@@ -130,6 +135,7 @@ class SideNavOuterToolbar extends React.Component {
         pointerEvent.preventDefault();
       } else {
         this.props.history.push(path);
+        this.scrollView.scrollTo(0);
       }
 
       if (this.hideMenuAfterNavigation) {

diff --git a/templates/vue/application/src/layouts/side-nav-inner-toolbar.vue b/templates/vue/application/src/layouts/side-nav-inner-toolbar.vue
@@ -16,7 +16,7 @@
           :menu-toggle-enabled="headerMenuTogglerEnabled"
           :toggle-menu-func="toggleMenu"
         />
-        <dx-scroll-view class="layout-body with-footer">
+        <dx-scroll-view ref="scrollViewRef" class="layout-body with-footer">
           <slot />
           <slot name="footer" />
         </dx-scroll-view>
@@ -106,6 +106,9 @@ export default {
     },
     headerMenuTogglerEnabled() {
       return this.isXSmall;
+    },
+    scrollView() {
+      return this.$refs["scrollViewRef"].instance;
     }
   },
   watch: {
@@ -119,6 +122,7 @@ export default {
         this.menuOpened = false;
         this.menuTemporaryOpened = false;
       }
+      this.scrollView.scrollTo(0);
     }
   },
   components: {

diff --git a/templates/vue/application/src/layouts/side-nav-outer-toolbar.vue b/templates/vue/application/src/layouts/side-nav-outer-toolbar.vue
@@ -17,7 +17,7 @@
       :shading="drawerOptions.shaderEnabled"
       :close-on-outside-click="drawerOptions.closeOnOutsideClick"
     >
-      <dx-scroll-view class="with-footer">
+      <dx-scroll-view ref="scrollViewRef" class="with-footer">
         <slot />
         <slot name="footer" />
       </dx-scroll-view>
@@ -85,6 +85,9 @@ export default {
     },
     headerMenuTogglerEnabled() {
       return this.isXSmall;
+    },
+    scrollView() {
+      return this.$refs["scrollViewRef"].instance;
     }
   },
   watch: {
@@ -98,6 +101,7 @@ export default {
         this.menuOpened = false;
         this.menuTemporaryOpened = false;
       }
+      this.scrollView.scrollTo(0);
     }
   },
   components: {