SOLVED: Strange behaviour of Swipeable tabs when used with search bar. Is it a Bug?

In the following code the swipeable tabs works as expected only if I take out tag, otherwise it loads tab 2 instead of tab 1 and does not work as it should.

Help With Searchbar

Everything works good when I remove the searchbar from the code but with it cant work properly, The second tab is active and replace first one, second is replaced by third one and so on and when I am swipe the tabs, directly last tab displayed.

<template>
 <f7-page :page-content="false">
 <f7-navbar>
      <f7-nav-left>
        <f7-link class="panel-open" open-panel="left" icon="fa fa-bars"></f7-link>
      </f7-nav-left>
      <div class="title">Test</div>
      <f7-nav-right>
        <f7-link class="searchbar-enable" icon="fa fa-search"></f7-link>
      </f7-nav-right>
      <f7-searchbar search-container=".search-list" class="searchbar-components" search-item=".col-33" expandable></f7-searchbar>
    </f7-navbar>

  <f7-toolbar tabbar bottom>
    <f7-link tab-link="#tab-1" tab-link-active>Tab 1</f7-link>
    <f7-link tab-link="#tab-2">Tab 2</f7-link>
    <f7-link tab-link="#tab-3">Tab 3</f7-link>
  </f7-toolbar>
  <f7-tabs swipeable>
    <f7-tab id="tab-1" class="page-content" tab-active>
      <f7-block>
        <p>Tab 1 content</p>
        ...
      </f7-block>
    </f7-tab>
    <f7-tab id="tab-2" class="page-content">
      <f7-block>
        <p>Tab 2 content</p>
        ...
      </f7-block>
    </f7-tab>
    <f7-tab id="tab-3" class="page-content">
      <f7-block>
        <p>Tab 3 content</p>
        ...
      </f7-block>
    </f7-tab>
  </f7-tabs>
</f7-page>
</template>
<script>
</script>

‘’’

Would be good to see live example or JSFiddle

Here are the jsfiddles:

  1. Swipeable Tabs with Search bar
    https://jsfiddle.net/mtech2008/ve0x8c7d/

  2. Swipeable Tabs without Search bar (search bar commented)
    https://jsfiddle.net/mtech2008/4xtp5os8/

No. 2 Works exactly as it should but I am not sure why No. 1 Does not? Using Framework7 3.6.7 Vue. Please help.

Thanks and Regards

I believe it needs to be in a subnavbar per documentation:

<f7-navbar title="Searchbar">
<f7-subnavbar :inner="false">
  <f7-searchbar
    search-container=".search-list"
    search-in=".item-title"
  ></f7-searchbar>
</f7-subnavbar>

This resolved the error for me on jsfiddle

No it did not solve the problem. try to swipe the tabs clicking on tabs it still have randomness in its behavior.

Now here is the Case 3

  1. Unswipeable tabs with search bar works perfectly well (The only changes here I made in the code is
<f7-tabs swipeable>

is being replaced by

<f7-tabs>

)
https://jsfiddle.net/mtech2008/4bh71e6v/

Here are the three cases and it’s corresponding jsfiddles:

  1. Swipeable Tabs with Search bar (Buggy)
    https://jsfiddle.net/mtech2008/ve0x8c7d/

  2. Swipeable Tabs without Search bar (search bar commented)
    https://jsfiddle.net/mtech2008/4xtp5os8/

  3. Unswipeable tabs with search bar work perfectly well (The only changes here I made in the code is <f7-tabs swipeable> is being replaced by <f7-tabs>)
    https://jsfiddle.net/mtech2008/4bh71e6v/

Put searchbar’s backdrop element inside and as a direct child of the page and specify it in Searchbar settings, otherwise it is added automatically by Searchbar that breaks Tabs logic

1 Like

Thank you so very much Vladimir. I was stuck with it in my project. Thank you so much once again for your valuable precious time and your reply.