Tab hash changes interop with window.location - 1.0.0.alpha-3

[revgum]

Clicking a tab doesn't update the window.location.hash, nor does a link external to the tabs affect the state of the tab visibility and UI.

Expected Behavior

When clicking a tab, I'd expect the location bar to update so as to provide the user with a link for bookmarking/sharing.

When clicking a link, outside of the tabs component, that affects the window.location.hash I would expect the tab component to attempt to select the appropriate tab and display its content.

Current Behavior

The window.location.hash is not updated when clicking a tab, and the tab component does not respond to window.onhashchange events.

Possible Solution

I've solved this with using onShow when initializing the Tabs component, and a method for responding to window.onhashchange events. as seen below:

  let options = {
    onShow: function () {
      let target = this.$tabLinks[this.index].href.split('#')[1];
      location.hash = target;
    }
  };
  let elems = document.querySelectorAll('.tabs');
  elems.forEach(element => {
    M.Tabs.init(element, options);
  });

  // When location.hash changes, find the tabs element and select a tab.. this works with 
  // hash changes that related to tabs and hash changes that do not relate to tabs have no effect.
  function hashTabChanged() {
    let elem = document.querySelector('.tabs');
    let instance = M.Tabs.getInstance(elem);
    instance.select(location.hash.replace('#',''));
  }
  window.onhashchange = hashTabChanged;

Context

I think integrating window.onhashchange as well as updating the location.hash directly in the Tabs component (or as an option) would be ideal and gives the developer a clean/integrated method for opting-in.

Your Environment

• Version used: 1.0.0.alpha-3
• Browser Name and version: Chrome and Firefox

[AmitJoki]

Does bookmarking with a particular hash ensure that the particular tab will be shown? I don't think that's the case.

[revgum]

@AmitJoki Yes it works with the code example I've provided, because of the window.onhashchange event binding. I'm thinking this concept could be baked into the Tabs code directly.

[ray007]

And what happens if you have two sets of tabs on your page?
I'm not sure this is a good idea. Optionally at best.

[revgum]

@ray007 good question, when tabs are uniquely named it wouldn't matter.. the proper tab(s) would be selected.