Merge pull request silverstripe#1683 from satrun77/pulls/active-tab

FIX Remove current active tab from session storage after use

client/src/legacy/LeftAndMain.EditForm.js

@@ -209,7 +209,7 @@ $.entwine('ss', function($){
           'Admin.VALIDATIONERROR',
           'Validation Error'
         );
-        
+
         errorMessage(toastNotificationMessage);
         // Ensure that this error message popup won't be added more than once
         this.setValidationErrorShown(true);

client/src/legacy/LeftAndMain.js

@@ -51,11 +51,21 @@ window.ss.debounce = function (func, wait, immediate) {
  * The URL to use for saving and loading tab state
  */
 window.ss.tabStateUrl = function() {
-  return window.location.href
+  return window.ss.formatTabStateUrl(window.location.href);
+};
+
+/**
+ * Helper function to format URL that is used for saving and loading tab state
+ *
+ * @param url {string} URL to format
+ * @returns {*}
+ */
+window.ss.formatTabStateUrl = function(url) {
+  return url
     .replace(/\?.*/, '')
     .replace(/#.*/, '')
     .replace($('base').attr('href'), '');
-},
+};
 
 $(window).on('resize.leftandmain', function(e) {
   $('.cms-container').trigger('windowresize');
@@ -400,7 +410,9 @@ $.entwine('ss', function($) {
         return;
       }
 
-      this.saveTabState();
+      // Clear tab state for current browser URL, and save state for new panel to load
+      this.clearTabState(window.ss.tabStateUrl());
+      this.saveTabState(window.ss.formatTabStateUrl(url), true);
 
       data.__forceReferer = forceReferer;
 
@@ -487,7 +499,7 @@ $.entwine('ss', function($) {
       formData.push({ name: 'BackURL', value: document.URL.replace(/\/$/, '') });
 
       // Save tab selections so we can restore them later
-      this.saveTabState();
+      this.saveTabState(window.ss.tabStateUrl(), false);
 
       // Standard Pjax behaviour is to replace the submitted form with new content.
       // The returned view isn't always decided upon when the request
@@ -880,11 +892,18 @@ $.entwine('ss', function($) {
     /**
      * Save tab selections in order to reconstruct them later.
      * Requires HTML5 sessionStorage support.
+     *
+     * Parameters:
+     *  (String) url used for session storage key
+     *  (Boolean) resetTab true force selected tab to first, else current active
      */
-    saveTabState: function() {
+    saveTabState: function(url, resetTab) {
       if(typeof(window.sessionStorage)=="undefined" || window.sessionStorage === null) return;
+      if (url === undefined) {
+        const url = window.ss.tabStateUrl();
+      }
 
-      var selectedTabs = [], url = window.ss.tabStateUrl();
+      var selectedTabs = [];
       this.find('.cms-tabset,.ss-tabset').each(function(i, el) {
         var id = $(el).attr('id');
         if(!id) return; // we need a unique reference
@@ -893,7 +912,7 @@ $.entwine('ss', function($) {
         // Allow opt-out via data element or entwine property.
         if($(el).data('ignoreTabState') || $(el).getIgnoreTabState()) return;
 
-        selectedTabs.push({id:id, selected:$(el).tabs('option', 'active')});
+        selectedTabs.push({id:id, selected:resetTab ? 0 : $(el).tabs('option', 'active')});
       });
 
       if(selectedTabs) {