(feat): data-toggler-tab-active-forget attribute to keep opened tab b…

…etween turbo requests
davidjr82 · Nov 16, 2022 · 8a5280d · 8a5280d
1 parent b3bb469
commit 8a5280d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/docs/examples/tabs.md b/docs/examples/tabs.md
@@ -27,10 +27,8 @@ To use tabs in a comfortable way, we have added an *alias* that sets everything
     - `data-toggler-listen="-tabs_group,+tab_groups_content"`
 :::
 
-
-::: info
-You should set `data-toggler-tab-active` in one data-toggler-tab-link to start with that tab enabled
-:::
+You should set `data-toggler-tab-active` in one data-toggler-tab-link to start with that tab enabled.
+If you don't want the tab-link to be active every time a target is connected, set also `data-toggler-tab-active-forget` in that tab-link.
 
 ::: tip
 We show a simplified example code for clarity purposes.

diff --git a/src/controllers/toggler_controller.js b/src/controllers/toggler_controller.js
@@ -118,7 +118,17 @@ export default class extends Controller {
         }
 
         if (element.hasAttribute('data-toggler-tab-active')) {
-            this.setStates(element.dataset?.togglerStates?.split(",").filter(state => state.includes(':')) || []);
+            let tabs_to_enable = element.dataset?.togglerStates?.split(",").filter(state => state.startsWith('tab_') && state.includes(':'));
+
+            tabs_to_enable.forEach(tab_to_enable => {
+
+                let state = this.getStateNameFromListener(tab_to_enable);
+                let value = this.getStateValue(state);
+
+                if(value == '' || !element.hasAttribute('data-toggler-tab-active-forget')) {
+                    this.setStates(element.dataset?.togglerStates?.split(",").filter(state => state.includes(':')) || []);
+                }
+            });
         }
 
         let listen = element.dataset?.togglerListen?.split(',') || [];