fix(tabs): Only activate the closing behaviour if the closed tab was previously active. #264

development/issues/closed/268.html

@@ -16,11 +16,11 @@
     <main>
 
           <monster-tabs data-monster-option-features-removeBehavior="auto">
-              <div data-monster-button-label="A1" data-monster-removable>test</div>
-              <div data-monster-button-label="A2" data-monster-removable>test</div>
-              <div data-monster-button-label="A3" class="active" data-monster-removable>test</div>
-              <div data-monster-button-label="A4" data-monster-removable>test</div>
-              <div data-monster-button-label="A5" data-monster-removable>test</div>
+              <div data-monster-button-label="A1" data-monster-removable>test1</div>
+              <div data-monster-button-label="A2" data-monster-removable>test2</div>
+              <div data-monster-button-label="A3" class="active" data-monster-removable>test3</div>
+              <div data-monster-button-label="A4" data-monster-removable>test44</div>
+              <div data-monster-button-label="A5" data-monster-removable>test55</div>
           </monster-tabs>
 
     </main>

source/components/layout/tabs.mjs

@@ -442,7 +442,8 @@ function showPopper() {
         this[popperElementSymbol].style.removeProperty("visibility");
     })
         .run(undefined)
-		.then(() => {})
+        .then(() => {
+        })
         .catch((e) => {
             addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
         });
@@ -653,26 +654,18 @@ function show(element) {
  * @private
  */
 function initEventHandler() {
+    const self = this;
+
     if (!this.shadowRoot) {
         throw new Error("no shadow-root is defined");
     }
 
-	/**
-	 * @param {Event} event
-	 */
-	this[changeTabEventHandler] = (event) => {
-		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "button");
-
-		if (element instanceof HTMLButtonElement && element.disabled !== true) {
-			show.call(this, element);
-		}
-	};
-
     /**
      * @param {Event} event
      * @fires monster-tab-remove
      */
     this[removeTabEventHandler] = (event) => {
+
         const element = findTargetElementFromEvent(
             event,
             ATTRIBUTE_ROLE,
@@ -691,39 +684,50 @@ function initEventHandler() {
                     `${ATTRIBUTE_PREFIX}tab-reference`,
                 );
 
-				const previous = button.previousElementSibling;
-				const next = button.nextElementSibling;
+                let doChange = false;
+                let nextName = null
+                let previousName = null;
+
+                const btn = this.getOption("buttons")
+                for (let i = 0; i < btn.standard.length; i++) {
+                    if (btn.standard[i].reference === reference) {
+                        if (btn.standard[i].state === "active") {
+                            doChange = i
+                            if (i < btn.standard.length - 1) {
+                                nextName = btn.standard[i + 1]?.reference
+                            }
+                            if (i > 0) {
+                                previousName = btn.standard[i - 1]?.reference
+                            }
+                        }
+                        break;
+                    }
+                }
 
                 if (reference) {
                     const container = this.querySelector(`[id=${reference}]`);
                     if (container instanceof HTMLElement) {
-						container.remove();
-						initTabButtons.call(this);
-						fireCustomEvent(this, "monster-tab-remove", {
-							reference,
-						});
-					}
-				}
+
+                        if (doChange) {
 
                             switch (this.getOption("features.removeBehavior")) {
                                 case "auto":
-						if (next instanceof HTMLButtonElement) {
-							next.click();
+                                    if (nextName !== null) {
+                                        self.activeTab(nextName);
                                     } else {
-							// get previous button
-							if (previous instanceof HTMLButtonElement) {
-								previous.click();
+                                        if (previousName !== null) {
+                                            self.activeTab(previousName);
                                         }
                                     }
                                     break;
                                 case "next":
-						if (next instanceof HTMLButtonElement) {
-							next.click();
+                                    if (nextName !== null) {
+                                        self.activeTab(nextName);
                                     }
                                     break;
                                 case "previous":
-						if (previous instanceof HTMLButtonElement) {
-							previous.click();
+                                    if (previousName !== null) {
+                                        self.activeTab(previousName);
                                     }
                                     break;
 
@@ -731,14 +735,30 @@ function initEventHandler() {
                                     break;
                             }
                         }
+
+                        container.remove();
+                        initTabButtons.call(this);
+                        fireCustomEvent(this, "monster-tab-remove", {
+                            reference,
+                        });
+                    }
+                }
+
+            }
         }
     };
 
-	this[navElementSymbol].addEventListener("touch", this[changeTabEventHandler]);
-	this[navElementSymbol].addEventListener("click", this[changeTabEventHandler]);
+    /**
+     * @param {Event} event
+     */
+    this[changeTabEventHandler] = (event) => {
 
-	this[navElementSymbol].addEventListener("touch", this[removeTabEventHandler]);
-	this[navElementSymbol].addEventListener("click", this[removeTabEventHandler]);
+        const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "button");
+
+        if (element instanceof HTMLButtonElement && element.disabled !== true) {
+            show.call(this, element);
+        }
+    };
 
     /**
      * @param {Event} event
@@ -755,6 +775,14 @@ function initEventHandler() {
         hidePopper.call(this);
     };
 
+
+    // the order is important, because the remove must be before the change
+    this[navElementSymbol].addEventListener("touch", this[removeTabEventHandler]);
+    this[navElementSymbol].addEventListener("click", this[removeTabEventHandler]);
+
+    this[navElementSymbol].addEventListener("touch", this[changeTabEventHandler]);
+    this[navElementSymbol].addEventListener("click", this[changeTabEventHandler]);
+
     return this;
 }
 
@@ -906,7 +934,8 @@ function initTabButtons() {
                 }
             })
                 .run(undefined)
-				.then(() => {})
+                .then(() => {
+                })
                 .catch((e) => {
                     addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
                 });