Multiple tabs shown when animation is turned on and user double clicks

[Frederick]

Consider the following cshtml file.  I have changed the style for the tab to hide the tabstrip item headers and added previous/next buttons to the page to simulate a wizard.  If I don't turn off animation for the tabstrip and the user double clicks on the previous or next button the contents of two tabs will be shown stacked on top of one another.  Is there anything I can do about this or is this a bug?

@{
    ViewBag.Title = "About";
}
<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>
<button id="Previous" class="toggleTab k-button" onclick="moveToTab(-1);return true;">
    Previous</button>
<button id="Next" class="toggleTab k-button" onclick="moveToTab(1);return true;">
    Next</button>
@(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Animation( false)
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Paris")
                  .Selected(true)
                  .Content(@<text>
                                Paris
                            </text>);

              tabstrip.Add().Text("New York")
                  .Content(@<text>
    New York
</text>);

              tabstrip.Add().Text("Moscow")
                  .Content(@<text>
Moscow
</text>);

              tabstrip.Add().Text("Sydney")
                  .Content(@<text>
Sydney
</text>);
    tabstrip.Add().Text("Fort Worth")
                  .Content(@<text>
Fort Worth
</text>);
          })
    )
<script>

    var currentIndex = 0;
    var maxIndex;
    var tabStrip;
    
    function moveToTab(increment) {

        if (increment > 0) {
            if (currentIndex < maxIndex) {
                currentIndex++;
                tabStrip.select(currentIndex);
            }
        } else {
            if (currentIndex > 0) {
                currentIndex--;
                tabStrip.select(currentIndex);
            }
        }

    }

    $(document).ready(function () {

        tabStrip = $("#tabstrip").data("kendoTabStrip");
        maxIndex = tabStrip.items().length - 1;
    });
</script>

<style scoped>
    #tabstrip ul.k-tabstrip-items {
    display: none;
}
</style>

[Vladimir Iliev]

Hi Frederick,

 
Basically current behavior is expected and you should handle this behavior using custom code. For example you can disable the buttons during the animation - please check the updated code below:

<script>
    var currentIndex = 0;
    var maxIndex;
    var tabStrip;

    function disableButton(element) {
        element.attr("disabled", "disabled");
    }

    function enableButton(element) {
        element.removeAttr("disabled");
    }

    function moveToTab(increment) {

        disableButton($("#Previous"));
        disableButton($("#Next"));

        if (increment > 0) {
            if (currentIndex < maxIndex) {
                currentIndex++;
                tabStrip.select(currentIndex);
            }
        } else {
            if (currentIndex > 0) {
                currentIndex--;
                tabStrip.select(currentIndex);
            }
        }

        setTimeout(function () {
            enableButton($("#Previous"));
            enableButton($("#Next"));
        }, 500) //set the time of the animation
    }

    $(document).ready(function () {
        tabStrip = $("#tabstrip").data("kendoTabStrip");
        maxIndex = tabStrip.items().length - 1;
    });
</script>

Kind Regards,
Vladimir Iliev
Telerik