iOS Swipe Navigation Issue

[holtwick]

• Framework7 version: 4.1.0
• Vue.js version: 2.6.8
• Platform and Target: iOS 11 Cordova like app

Dragging from the border to navigate back seems to break the pull history. It behaves differently than pressing the back buttons.

Reproduce in https://collect-app.com/

1. Create an entry
2. Press "i" button
3. Swipe back

Video: https://www.dropbox.com/s/whgu4nx6c0mgm89/ScreenRecording_03-12-2019%2021-43-43.MP4?dl=0

When continuing to navigate this error shows up:

TypeError
undefined is not an object (evaluating 'p[0].f7Page.route')

[PrevApp]

Same problem..... #3064 (comment)

[nolimits4web]

I need something more reproducable to be able to track the issue. Can you replicate it in JSFiddle?

[holtwick]

Voila: https://jsfiddle.net/perenzo/p6afd47x/12/

Click on About, then on Form, then drag to go back twice. You will end up in an error message.

BTW is there an up to date JSFiddle template for F7 v4 and Vue? I hope I used the correct imports in the fiddle.

[nolimits4web]

@holtwick here is the F7-Vue v4 fiddle https://jsfiddle.net/n0xm5ejk/ About -> Form, then 2 times swipe back. I can't see any errors in console

[holtwick]

Thanks for the sample and your patience... indeed the sample was not showing the error.

I think I was able to track down the cause for the issue I demonstrated in my app. In my routes I was defining master/detail. When I comment that out everything works fine. Now for the details:

My home route is defined like this:

 {
      path: '/',
      component: iosHome,
      master: true,
      detailRoutes: [
        {
          path: '/detail/:id',
          component: iosDetail,
        },
      ]
    },

The intention was to have it run on iPhone and iPad with the same set of routes. If I change it to:

 {
      path: '/',
      component: iosHome,
    },

The problem is gone. So the question is, am I doing something wrong in my code? Or do I have to separate master/detail routes from simple routes programmatically to support both?

Here is the complete routes definition that contains the problem:
ios-routes.js.zip

[nolimits4web]

Shouldn't be an issue. What if you move out detail routes like this:

  {
      path: '/',
      component: iosHome,
      master: true,
  },
  {
      path: '/detail/:id',
      component: iosDetail,
  },

Issue is still there?

[holtwick]

It is still there when I only add master: true

[nolimits4web]

Then I need to see JSFiddle or something live as I can’t replicate it

[holtwick]

Here it is: https://jsfiddle.net/perenzo/9j1auxek/12/

Video, recorded from Firefox 66 on macOS: https://www.dropbox.com/s/r96x40yxmcq9fwo/SlideBack.mp4?dl=0

[nolimits4web]

Thanks, fixed now