Routable tabs inconsistent handling of props

Routable tabs have an inconsistent handling of props.
If I navigate to a tab from one of the sibling tabs I get different props than when I navigate to a tab from somewhere else.

Is this a bug?

Using React.

I have the following routes:

 {
         path: '/route-tabs/:id/tabs/',
         component: TabsRoutablePage,
         options: {
             props: {
                  prop_parent: 'a'
             }
         },
         tabs: [
         {
               path: '/',
               id: 'tab1',
               component: TabContent1,
               options: {
                     props: {
                          prop_tab1: '1'
                     }
               },
         },
         {
               path: '/tab2/',
               id: 'tab2',
               component: TabContent2,
               options: {
                     props: {
                          prop_tab2: '2'
                     }
               },
         }]
},

So I have the following props:

  • id from route params,
  • prop_parent from tab parent page route,
  • and prop_tab1 / prop_tab2 from tab page routes.

My expectation is as follows:
If I navigate from somewhere other than the tabs pages to one of the tabs, no matter which tab it is, I will get properties as follows:

  • TabsRoutablePage: id, prop_parent
  • TabContent1: id, prop_parent, prop_tab_1
  • TabContent2: id, prop_parent, prop_tab_2

That does not happen. This is what happens:

  • TabsRoutablePage: id, prop_parent.
  • TabContent1 and TabContent2: If it is the first tab navigated to from outside the tabs it ONLY has id. It does not have prop_parent and prop_tab_1/prop_tab_2. If it is navigated to from one of the tab pages it has id and prop_parent, but not prop_tab_1/prop_tab_2.

Therefore:

  • The parent tab page is passed the correct properties from the path.
  • The tab pages are not passed the props set on the parent path when navigating to it from somewhere else.
  • The tab pages are passed the props set on the parent path when navigating to it from one of the tab pages.

This is inconsisent. If I navigate to a tab from one of the sibling tabs I get different props than when I navigate to a tab from somewhere else.

In addition, I would expect to get passed the props that are set on the tab page routes, but they do not get passed at all.

Did you try with latest 6.0.19 version? There were few fixes to routable tabs there

I installed latest version and the behavior is still the same.

I include a screenshot of chrome debugger console.

I navigate to tab 2 first. It has no tabs and title props from parent page route props.
I navigate to tab 3 and it has tabs and title props.
I navigate back to tab 2 and it now has tabs and title props.

Please create a simple live CodeSandbox example where issue is reproduced using template from this topic How to ask a good question on forum so I can check it better

Here it is: optimistic-snow-jhkjc - CodeSandbox

I have another forum question on tab events not firing so I included it in here because I think it is related. BTW, the latest version fixed the issue of React tab component effect not running when it become active.

Ok, both issue with parent props and not catching initial onTabShow will be fixed in next update tomorrow or on Friday