Materializecss - tabs with buttons not working on mobile

Question

I have an issue with mobile view and materializecss. In short, on desktop my code (see below) is working fine. If I run dev tools (F12) and select CTRL+SHIFT+M / Toggle Device toolbar (to simulate mobile device view) button in this view stops working (it should move you to another tab). Any solutions?

Wide with the problem demonstration: https://share.viewedit.com/QFQ7LrdFW8iXXzJ2ZWbzSs

Working example: https://codepen.io/anon/pen/VzKYEx

<div class="row">
    <div class="col s12">
        <ul class="tabs ">
            <li class="tab col s3"><a href="#connect">x1</a></li>
            <li class="tab col s3"><a href="#login">x2</a></li>
            <li class="tab col s3"><a href="#register">x3</a></li>
        </ul>
    </div>
    <div id="connect" class="col s12">
        <div class="valign-wrapper center-align" id="connect" data-section="connect">
    <div class="valign">
        <div class="container">

            <img class="logo" src="{{ asset('assets/images/logo.png') }}" alt="logo dimesion">
            <div class="buttons">
                <div class="row">
                    <div class="input-field col s10 push-s1">
                        <button class="btn waves-effect waves-light btn-large btn-orange btn-block"
                                data-show-tab="login"
                                type="button"
                                name="action">go_to_x2</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
    <div id="login" class="col s12">
        x2
    </div>
    <div id="register" class="col s12">
        x3
    </div>
</div>

JS:

var $page = $('body');
var $tabs = $page.find('ul.tabs');
$tabs.tabs({swipeable: true});

    $page.find('[data-show-tab]').on('click', (e) => {
        var tab = $(e.target).attr('data-show-tab');
        $tabs.tabs('select_tab', tab);
    });

SCSS:

@import 'compass/css3';

.valign-wrapper {
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  position: absolute;

  & .valign {
    width: 100%;

    &.height100 {
      height: 100%;
    }
  }

  &#connect {
    background-color: white;
    color: black;

    & .logo {
      position: absolute;
      margin: auto auto;
      top: 20vh;
      left: 0;
      right: 0;
    }

    & .buttons {
      bottom: 40px;
      left: 0;
      position: absolute;
      width: 100%;
    }
  }
}

.carousel {
  height: 100% !important;
  position: absolute;

  & .carousel-item {
    height: 100%;
  }
}

Answer 1

It seems it is a bug in materializecss, tabs?

Anyway, partial solution is to disable swipeable on the tabs.

$tabs.tabs({swipeable: false})