Detach local variable triggers inside inactive tabs

commit_hash:da4e819b3ec0a42950451d4f5099024df276ca00

.mapping.json

@@ -14282,6 +14282,7 @@
   "client/web/divkit/src/components/utilities/Actionable.svelte":"divkit/public/client/web/divkit/src/components/utilities/Actionable.svelte",
   "client/web/divkit/src/components/utilities/Arrows.module.css":"divkit/public/client/web/divkit/src/components/utilities/Arrows.module.css",
   "client/web/divkit/src/components/utilities/DevtoolHolder.svelte":"divkit/public/client/web/divkit/src/components/utilities/DevtoolHolder.svelte",
+  "client/web/divkit/src/components/utilities/EnabledContext.svelte":"divkit/public/client/web/divkit/src/components/utilities/EnabledContext.svelte",
   "client/web/divkit/src/components/utilities/Outer.module.css":"divkit/public/client/web/divkit/src/components/utilities/Outer.module.css",
   "client/web/divkit/src/components/utilities/Outer.svelte":"divkit/public/client/web/divkit/src/components/utilities/Outer.svelte",
   "client/web/divkit/src/components/utilities/OuterBackground.module.css":"divkit/public/client/web/divkit/src/components/utilities/OuterBackground.module.css",
@@ -14292,6 +14293,7 @@
   "client/web/divkit/src/components/video/Video.module.css":"divkit/public/client/web/divkit/src/components/video/Video.module.css",
   "client/web/divkit/src/components/video/Video.svelte":"divkit/public/client/web/divkit/src/components/video/Video.svelte",
   "client/web/divkit/src/context/action.ts":"divkit/public/client/web/divkit/src/context/action.ts",
+  "client/web/divkit/src/context/enabled.ts":"divkit/public/client/web/divkit/src/context/enabled.ts",
   "client/web/divkit/src/context/root.ts":"divkit/public/client/web/divkit/src/context/root.ts",
   "client/web/divkit/src/context/state.ts":"divkit/public/client/web/divkit/src/context/state.ts",
   "client/web/divkit/src/dev.html":"divkit/public/client/web/divkit/src/dev.html",
@@ -16270,6 +16272,16 @@
   "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-states/firefoxMobile/step1.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-states/firefoxMobile/step1.png",
   "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-states/firefoxMobile/step2.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-states/firefoxMobile/step2.png",
   "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-states/firefoxMobile/step3.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-states/firefoxMobile/step3.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/chromeMobile/step0.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/chromeMobile/step0.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/chromeMobile/step1.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/chromeMobile/step1.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/chromeMobile/step2.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/chromeMobile/step2.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/chromeMobile/step3.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/chromeMobile/step3.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/chromeMobile/step4.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/chromeMobile/step4.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/firefoxMobile/step0.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/firefoxMobile/step0.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/firefoxMobile/step1.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/firefoxMobile/step1.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/firefoxMobile/step2.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/firefoxMobile/step2.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/firefoxMobile/step3.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/firefoxMobile/step3.png",
+  "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/firefoxMobile/step4.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers-tabs/firefoxMobile/step4.png",
   "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers/chromeMobile/step0.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers/chromeMobile/step0.png",
   "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers/chromeMobile/step1.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers/chromeMobile/step1.png",
   "client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers/chromeMobile/step2.png":"divkit/public/client/web/divkit/tests/hermione/screens/crossplatform/interactions/div-trigger/local-triggers/chromeMobile/step2.png",

client/web/divkit/src/components/Root.svelte

@@ -84,6 +84,7 @@
     import { dictSetValue } from '../actions/dict';
     import { copyToClipboard } from '../actions/copyToClipboard';
     import { filterEnabledActions } from '../utils/filterEnabledActions';
+    import { ENABLED_CTX, type EnabledCtxValue } from '../context/enabled';
     import TooltipView from './tooltip/Tooltip.svelte';
     import Menu from './menu/Menu.svelte';
 
@@ -1609,6 +1610,10 @@
         }
     });
 
+    setContext<EnabledCtxValue>(ENABLED_CTX, {
+        isEnabled: constStore(true)
+    });
+
     function hasVariableWithType(name: string, type: VariableType): boolean {
         const instance = variables.get(name);
 

client/web/divkit/src/components/tabs/Tabs.svelte

@@ -16,9 +16,6 @@
     import type { DivBaseData } from '../../types/base';
     import type { ComponentContext } from '../../types/componentContext';
     import { ROOT_CTX, RootCtxValue } from '../../context/root';
-    import Outer from '../utilities/Outer.svelte';
-    import Unknown from '../utilities/Unknown.svelte';
-    import Actionable from '../utilities/Actionable.svelte';
     import { wrapError } from '../../utils/wrapError';
     import { genClassName } from '../../utils/genClassName';
     import { makeStyle } from '../../utils/makeStyle';
@@ -38,7 +35,10 @@
     import { edgeInsertsToCss } from '../../utils/edgeInsertsToCss';
     import { filterEnabledActions } from '../../utils/filterEnabledActions';
     import { nonNegativeModulo } from '../../utils/nonNegativeModulo';
+    import Outer from '../utilities/Outer.svelte';
+    import Actionable from '../utilities/Actionable.svelte';
     import DevtoolHolder from '../utilities/DevtoolHolder.svelte';
+    import EnabledContext from '../utilities/EnabledContext.svelte';
 
     export let componentContext: ComponentContext<DivTabsData>;
     export let layoutParams: LayoutParams | undefined = undefined;
@@ -765,9 +765,10 @@
                         style="left: {index * 100}%"
                     >
                         {#if childComponentContext}
-                            <Unknown
+                            <EnabledContext
                                 componentContext={childComponentContext}
                                 layoutParams={childLayoutParams}
+                                enabled={index === selected}
                             />
                         {/if}
                     </div>

client/web/divkit/src/components/utilities/EnabledContext.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { setContext } from 'svelte';
+    import { writable } from 'svelte/store';
+    import type { ComponentContext } from '../../types/componentContext';
+    import type { LayoutParams } from '../../types/layoutParams';
+    import { ENABLED_CTX, type EnabledCtxValue } from '../../context/enabled';
+    import Unknown from './Unknown.svelte';
+
+    export let componentContext: ComponentContext;
+    export let layoutParams: LayoutParams | undefined = undefined;
+    export let enabled: boolean;
+
+    const enabledStore = writable(enabled);
+
+    setContext<EnabledCtxValue>(ENABLED_CTX, {
+        isEnabled: enabledStore
+    });
+
+    $: {
+        enabledStore.set(enabled);
+    }
+</script>
+
+<Unknown
+    {componentContext}
+    {layoutParams}
+/>

client/web/divkit/src/components/utilities/Outer.svelte

@@ -73,6 +73,7 @@
     import { filterEnabledActions } from '../../utils/filterEnabledActions';
     import { isPrefersReducedMotion } from '../../utils/isPrefersReducedMotion';
     import { layoutProvider } from '../../use/layoutProvider';
+    import { ENABLED_CTX, type EnabledCtxValue } from '../../context/enabled';
     import Actionable from './Actionable.svelte';
     import OuterBackground from './OuterBackground.svelte';
 
@@ -95,6 +96,7 @@
 
     const rootCtx = getContext<RootCtxValue>(ROOT_CTX);
     const stateCtx = getContext<StateCtxValue>(STATE_CTX);
+    const { isEnabled } = getContext<EnabledCtxValue>(ENABLED_CTX);
     const direction = rootCtx.direction;
 
     let currentNode: HTMLElement;
@@ -212,10 +214,12 @@
         }
 
         prevTriggersUnsubscribe?.();
-        prevTriggersUnsubscribe = rootCtx.processVariableTriggers(
-            componentContext,
-            componentContext.json.variable_triggers
-        );
+        if ($isEnabled) {
+            prevTriggersUnsubscribe = rootCtx.processVariableTriggers(
+                componentContext,
+                componentContext.json.variable_triggers
+            );
+        }
     }
 
     // If origJson is same, than the component itself is the same
@@ -224,6 +228,16 @@
         rebind();
     }
 
+    $: if ($isEnabled) {
+        prevTriggersUnsubscribe?.();
+        prevTriggersUnsubscribe = rootCtx.processVariableTriggers(
+            componentContext,
+            componentContext.json.variable_triggers
+        );
+    } else {
+        prevTriggersUnsubscribe?.();
+    }
+
     $: jsonFocus = componentContext.getDerivedFromVars(componentContext.json.focus);
     $: jsonBorder = componentContext.getDerivedFromVars(componentContext.json.border);
     $: jsonPaddings = componentContext.getDerivedFromVars(componentContext.json.paddings);

client/web/divkit/src/context/enabled.ts

@@ -0,0 +1,7 @@
+import type { Readable } from 'svelte/store';
+
+export const ENABLED_CTX = Symbol('enabled');
+
+export interface EnabledCtxValue {
+    isEnabled: Readable<boolean>;
+}

test_data/interactive_snapshot_test_data/div-trigger/local-triggers-tabs.json

@@ -2,7 +2,8 @@
   "description": "Local triggers with tabs",
   "platforms": [
     "android",
-    "ios"
+    "ios",
+    "web"
   ],
   "div_data": {
     "templates": {