3

I'm using this

https://material.io/develop/web/components/tabs/tab-bar/

To make a tab bar

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

<div class="mdc-tab-bar" role="tablist">
    <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area">
            <div class="mdc-tab-scroller__scroll-content">

                <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">title</span>
                        <span class="mdc-tab__text-label">Name</span>
                    </span>
                    <span class="mdc-tab-indicator mdc-tab-indicator--active">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
                        <span class="mdc-tab__text-label">Tags</span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
                        <span class="mdc-tab__text-label">Status</span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">warning</span>
                        <span class="mdc-tab__text-label">Restriction</span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>
                <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
                    <span class="mdc-tab__content">
                        <span class="mdc-tab__icon material-icons" aria-hidden="true">keyboard_arrow_right</span>
                        <span class="mdc-tab__text-label">Other</span>
                    </span>
                    <span class="mdc-tab-indicator">
                        <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
                    </span>
                    <span class="mdc-tab__ripple"></span>
                </button>

            </div>
        </div>
    </div>
</div>

and this JS

    const tabBar = mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));
    tabBar.listen('MDCTab:interacted', function (event) {
        alert(1);
    });
    document.querySelectorAll('.mdc-tab-bar button')[3].click();
    //tabBar.activateTab(3);

Invoking the click works (via code or manually with mouse), and emits the event and alerts "1". However I would rather use the activateTab function, but it only makes the tab active, but does not emit the event.

Does anyone know what's wrong here?

benvc
  • 14,448
  • 4
  • 33
  • 54
omega
  • 40,311
  • 81
  • 251
  • 474

1 Answers1

5

The MDCTab:interacted event is emitted before tab activation which is why it is not triggered when using the activateTab method. MDCTab:interacted is actually used by the MDC tab bar to know which tab to activate. Depending on what your end goal is, you may be able to get what you need by using the MDCTabBar:activated event instead since it will be triggered by the activateTab method and provides the index of the activated tab in the event detail data.

const tabBar = mdc.tabBar.MDCTabBar.attachTo(document.querySelector('.mdc-tab-bar'));
const tabs = document.querySelectorAll('.mdc-tab');
tabBar.listen('MDCTabBar:activated', (event) => {
  const tab = tabs[event.detail.index];
  console.log(tab.children[0].children[1].textContent, 'tab activated');
});

tabBar.activateTab(3); // activate "Restriction" tab
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Tabs Example</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <div class="mdc-tab-bar" role="tablist">
      <div class="mdc-tab-scroller">
        <div class="mdc-tab-scroller__scroll-area">
          <div class="mdc-tab-scroller__scroll-content">
            <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__icon material-icons" aria-hidden="true">title</span>
                <span class="mdc-tab__text-label">Name</span>
              </span>
              <span class="mdc-tab-indicator mdc-tab-indicator--active">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
            <button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
                <span class="mdc-tab__text-label">Tags</span>
              </span>
              <span class="mdc-tab-indicator">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
            <button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span>
                <span class="mdc-tab__text-label">Status</span>
              </span>
              <span class="mdc-tab-indicator">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
            <button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__icon material-icons" aria-hidden="true">warning</span>
                <span class="mdc-tab__text-label">Restriction</span>
              </span>
              <span class="mdc-tab-indicator">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
            <button class="mdc-tab" role="tab" aria-selected="false" tabindex="0">
              <span class="mdc-tab__content">
                <span class="mdc-tab__icon material-icons" aria-hidden="true">keyboard_arrow_right</span>
                <span class="mdc-tab__text-label">Other</span>
              </span>
              <span class="mdc-tab-indicator">
                <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
              </span>
              <span class="mdc-tab__ripple"></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
benvc
  • 14,448
  • 4
  • 33
  • 54