Multiple problems with Routable Tabs + Route with parameters + Scrollable Tabs and Swipeable Tabs

Hi, I will try to be as concise and accurate as possible. I think I found a problem with the tabs component when used in conjunction with: routable tabs, scrollable tabs and swipeable tabs.
Let’s see for now, the code that works with only a few graphical glitches.
I have a route in which I visualize in detail a restaurant, whose ID is passed as a parameter.

[..]
{
    path: '/restaurant/:restaurant_id/',
    component: RestaurantPage,
    tabs : [
      {
        path: '/',
        id: 'tab-restaurant-main', 
        component: RestaurantMainComponent,
        async({ resolve, reject }) {
          i18n.get_translations().then(i18n.insert_translations)
        }
      },
      {
        path: '/menu/',
        id: 'tab-restaurant-menu', 
        component: RestaurantMenuComponent,
        async({ resolve, reject }) {
          i18n.get_translations().then(i18n.insert_translations)
        }
      },
      {
        path: '/order/',
        id: 'tab-restaurant-order', 
        component: RestaurantOrderComponent,
        async({ resolve, reject }) {
          i18n.get_translations().then(i18n.insert_translations)
        }
      },
      {
        path: '/reviews/',
        id: 'tab-restaurant-reviews', 
        component: RestaurantReviewsComponent,
        async({ resolve, reject }) {
          i18n.get_translations().then(i18n.insert_translations)
        }
      },
      {
        path: '/contact/',
        id: 'tab-restaurant-contact', 
        component: RestaurantContactComponent,
        async({ resolve, reject }) {
          i18n.get_translations().then(i18n.insert_translations)
        }
      }
    ],
    async({ resolve, reject }) {
      i18n.get_translations().then(i18n.insert_translations)
      resolve(utils.check_is_logged(RestaurantsPage, LoginPage))
    }
  }, [...]

Inside the main view is this piece of code:

<!-- Scrollable page content-->
<div class="toolbar tabbar tabbar-scrollable toolbar-top">
    <div class="toolbar-inner">
        <a class="tab-link link-active" href="./" data-route-tab-id="tab-restaurant-main" data-i18n="RESTAURANT_PAGE.TAB_HOME"></a>
        <a class="tab-link" href="./menu/" data-route-tab-id="tab-restaurant-menu" data-i18n="RESTAURANT_PAGE.TAB_MENU"></a>
        <a class="tab-link" href="./order/" data-route-tab-id="tab-restaurant-order" data-i18n="RESTAURANT_PAGE.TAB_ORDER"></a>
        <a class="tab-link" href="./reviews/" data-route-tab-id="tab-restaurant-reviews" data-i18n="RESTAURANT_PAGE.TAB_REVIEWS"></a>
        <a class="tab-link" href="./contact/" data-route-tab-id="tab-restaurant-contact" data-i18n="RESTAURANT_PAGE.TAB_CONTACT"></a>
    </div>
</div>


<div class="tabs tabs-routable">
    <div id="tab-restaurant-main" class="tab page-content tab-active"></div>

    <div id="tab-restaurant-menu" class="tab page-content"></div>

    <div id="tab-restaurant-order" class="tab page-content"></div>

    <div id="tab-restaurant-reviews" class="tab page-content"></div>
    
    <div id="tab-restaurant-contact" class="tab page-content"></div>
</div>

So far everything works, the various pages are loaded correctly and within each component / tabs page I can access the ID of the restaurant in this way: let restaurant_id = props['restaurant_id'].

There is a small graphical glitch if I add the tabbar-scrollable class, that is, the bottom border of the first active tab is not at the same width as the link. If I then click on the link of another tab and go back, everything works out. I’ll leave 3 images to see what happens. I think it’s a problem with fw7, because the code is almost identical to the demo. If I remove tabbar-scrollable the glitch doesn’t show up. Can it be fixed?

1 2 3


Now comes the most painful problem. I want to have swipeable tabs, so I modified my code like this:

<div class="tabs-swipeable-wrap">
    <div class="tabs tabs-routable">
        <div id="tab-restaurant-main" class="tab page-content tab-active"></div>

        <div id="tab-restaurant-menu" class="tab page-content"></div>

        <div id="tab-restaurant-order" class="tab page-content"></div>

        <div id="tab-restaurant-reviews" class="tab page-content"></div>
        
        <div id="tab-restaurant-contact" class="tab page-content"></div>
    </div>
</div>

What happens is:

  1. at the first swipe, the second tab is not selected properly as you can see from the screenshot

  2. at each swipe, this event occurs in the main page that contains the html of the tabs (the one above). This event is not triggered without tabs-swipeable-wrap. The problem is that at each swipe I lose the reference to: props['restaurant_id'] because it seems to reload the page without keeping the route parameter: /:restaurant_id/.

$on('pageAfterOut', async() => {})

Number two is the biggest problem. Am I doing something wrong with the tabs implementation? Or is there a bug with fw7?

4

I guess it happens because you insert translations AFTER tabor initialized so it detects wrongly initial link width and this is why the “underline” looks wrong size. You need to insert translations BEFORE the pageInit event, better on $mounted component hook.

Also you use both component and async props on routes at the same time, it is not allowed, only one of those can be used at the same time

For your second issue would be great to see more complete example, better if you can create minimal reproduction app using template from this topic How to ask a good question on forum

For your first anser I’ve tried to use static values as follow:

<div class="toolbar tabbar tabbar-scrollable toolbar-top">
    <div class="toolbar-inner">
        <a class="tab-link link-active" href="./" data-route-tab-id="tab-restaurant-main">My voice 1</a>
        <a class="tab-link" href="./menu/" data-route-tab-id="tab-restaurant-menu">My voice 2</a>
        <a class="tab-link" href="./order/" data-route-tab-id="tab-restaurant-order">My voice 3</a>
        <a class="tab-link" href="./reviews/" data-route-tab-id="tab-restaurant-reviews">My voice 4</a>
        <a class="tab-link" href="./contact/" data-route-tab-id="tab-restaurant-contact">My voice 5</a>
    </div>
</div>

and the bug is still there:
1 2

You are suggesting me to remove async in tabs route?

For the second answer I’ll try to give you a full example as a soon as possible! :slight_smile:

I’ve made this sandbox: jovial-boyd-lic8y - CodeSandbox

Here you can see the “underline” bugs and the restaurant_id disappear after a swipe.

Nb: I don’t know why in this demo the first tab don’t work, btw this is almost the same code of my app. Thanks

Ok, for your first issue, you must remove tab-link-active and tab-active classes from links and tabs, these will be set by router.

For second issue there is bug in core, will be fixed with next update

1 Like

Ok solved first issue.
For the second one I’ll wait. Thank you very much as always

Hi Vlad, I think that fixing the problem

  • router: fixed issue for routable swipeable tabs with dynamic params in route path (4a93d90)

something else broke on the routable tabs + swipeable tabs.

What happens is that if I swipe from one tab to another, the contents of the next tab are not loaded. The tab-active class is not set either. If I then manually click on a tab, everything works correctly again (the parameter bug has been fixed).

I have other pages with swipeable tabs that don’t use routable tabs and there’s no bug. So the problem is necessary when using these two components together.
The source code is the same as in the previous comments.

Even the $on('tab:init', async() => {}) never gets triggered for each tab when use swipe gesture.

Here a demo: Swipeabletab + routable tab - YouTube

Will check on Monday

1 Like

Thanks bro. I’ll wait for you

Should be fixed in today’s update

1 Like

Hi @nolimits4web I hope I’m not boring you with these issues I’m finding.
I found another issue with routable tabs. As you can see from the video: ( Routable tabs issue with back button - YouTube ) I have a page with two tabs created with the routable tabs component. If I open a page and then click the back button, I am taken back to the previous page containing the routable tabs, but after a few thousandths of a second I am taken back to the first tab instead of staying on the last tab opened.
Is this a bug or do I need to add something to my code?

Consider that the code is the same as the previous example, I simply removed a tabs.

Can you make a CodeSandbox with it please?

The code is the same. The bug only occurs on android, when I try it on browser (both with browserHistory=true and browserHistory=false) the problem does not appear.

But when I’m on Android, when I go back (as shown in the video) it takes me back to the first tabs… If you can’t test the bug locally on your device don’t worry, I keep the bug. It’s not that bad.

Eventually I will make the patreon to show you on discord this issue, if you want.