Tab events firing twice

Hi again!

I have some routable tabs, which are on the main page of my app. The layout is pretty basic:

 <div class="page-content">
    <div class="tabs-swipeable-wrap" data-touch-move-stop-propagation="false" data-threshold="20" data-speed="200">
        <div class="tabs tabs-routable">
            <div id="feed" class="tab">...</div>
            <div id="settings" class="tab">...</div>
            ...
        </div>
    </div>
tabs: [...],
on: {
   tabShow: function (el) {
     console.log('SHOW TAB: ' + el.target.id);
   },
   tabHide: function (el) {
     console.log('HIDE TAB: ' + el.target.id);
   }
}

As long as the tab-wrapper has the tabs-swipeable-wrap class, the tab events are triggered twice. If I remove it, the events are triggered once.

Does anybody have an idea what might cause this behaviour?

Need to check, could be a bug

1 Like

On latest v3 can’t see such issue, i put this to home page:

<div class="tabs-swipeable-wrap">
    <div class="tabs tabs-routable">
      <div class="page-content tab" id="tab1"></div>
      <div class="page-content tab" id="tab2"></div>
      <div class="page-content tab" id="tab3"></div>
    </div>
  </div>

and having this in route:

{
    path: '/',
    url: './home.html',
    name: 'home',
    tabs: [
      {
        path: '/',
        id: 'tab1',
        content: ' \
        <div class="block"> \
          <p>Tab 1 content</p> \
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p> \
          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p> \
          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p> \
        </div> \
        ',
      },
      {
        path: '/tab2/',
        id: 'tab2',
        content: '\
        <div class="block"> \
          <p>Tab 2 content</p> \
          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p> \
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p> \
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p> \
        </div> \
        ',
      },
      {
        path: '/tab3/',
        id: 'tab3',
        content: '\
        <div class="block"> \
          <p>Tab 3 content</p> \
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p> \
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p> \
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p> \
        </div> \
        ',
      },
    ],
    on: {
      tabShow: function (el) {
        console.log('SHOW TAB: ' + el.target.id);
      },
      tabHide: function (el) {
        console.log('HIDE TAB: ' + el.target.id);
      }
    }
  },

I see only one time HIDE + SHOW event when switching tabs