Fix broken back button in tabs with deep linking

This change fixes a bug in tabs which have deep linking enabled, whereby
the user, in using the browser back button, would only be able to
navigate backwards as far as the default tab hash location. Attempting
to navigate back to the previous page would result in infinite
redirection back to the default tab. For moreinformation see [this
issue](https://github.com/zurb/foundation/issues/6102)

This change has the tab control remember the entry location upon
initialization, and then whenever the hash changes, it compares the
current location.hash value with the entry location and the default hash
value, in order to determine whether to update the location.hash or
simply allow the navigation to occur without modifying the
location.hash.

diff --git a/js/foundation/foundation.tab.js b/js/foundation/foundation.tab.js
index 6f7b9ecd98eebae764eeb14cf46ba49a48d857ee..5b780ea38eabc8971bc77ada5841f36f4e6a93dd 100644 (file)
--- a/js/foundation/foundation.tab.js
+++ b/js/foundation/foundation.tab.js
@@ -29,6 +29,10 @@
       S('[' + this.attr_name() + '] > .active > a', this.scope).each(function () {
         self.default_tab_hashes.push(this.hash);
       });
+
+      // store the initial href, which is used to allow correct behaviour of the
+      // browser back button when deep linking is turned on.
+      self.entry_location = window.location.href;
     },
 
     events : function () {
@@ -104,7 +108,8 @@
      },
 
     toggle_active_tab: function (tab, location_hash) {
-      var S = this.S,
+      var self = this,
+          S = self.S,
           tabs = tab.closest('[' + this.attr_name() + ']'),
           tab_link = tab.find('a'),
           anchor = tab.children('a').first(),
@@ -157,6 +162,16 @@
             $('#' + $(document.activeElement).attr('href').substring(1))
               .attr('aria-hidden', null);
 
+          },
+          go_to_hash = function(hash) {
+            // This function allows correct behaviour of the browser's back button when deep linking is enabled. Without it
+            // the user would get continually redirected to the default hash.
+            var is_entry_location = window.location.href === self.entry_location,
+                default_hash = settings.scroll_to_content ? self.default_tab_hashes[0] : 'fndtn-' + self.default_tab_hashes[0].replace('#', '')
+
+            if (!(is_entry_location && hash === default_hash)) {
+              window.location.hash = hash;
+            }
           };
 
       // allow usage of data-tab-content attribute instead of href
@@ -168,8 +183,10 @@
       if (settings.deep_linking) {
 
         if (settings.scroll_to_content) {
+
           // retain current hash to scroll to content
-          window.location.hash = location_hash || target_hash;
+          go_to_hash(location_hash || target_hash);
+
           if (location_hash == undefined || location_hash == target_hash) {
             tab.parent()[0].scrollIntoView();
           } else {
@@ -178,9 +195,9 @@
         } else {
           // prefix the hashes so that the browser doesn't scroll down
           if (location_hash != undefined) {
-            window.location.hash = 'fndtn-' + location_hash.replace('#', '');
+            go_to_hash('fndtn-' + location_hash.replace('#', ''));
           } else {
-            window.location.hash = 'fndtn-' + target_hash.replace('#', '');
+            go_to_hash('fndtn-' + target_hash.replace('#', ''));
           }
         }
       }