From 35c0cb2e15de6e0c86393687ae86e5775f59f069 Mon Sep 17 00:00:00 2001
From: Francisco <jscriptcoder@gmail.com>
Date: Mon, 3 Apr 2023 10:42:19 +0200
Subject: [PATCH] Clean tabs component

---
 .../bridge-ui/src/components/Tabs/Tabs.svelte    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/bridge-ui/src/components/Tabs/Tabs.svelte b/packages/bridge-ui/src/components/Tabs/Tabs.svelte
index cba398e4fe1..be368be16ad 100644
--- a/packages/bridge-ui/src/components/Tabs/Tabs.svelte
+++ b/packages/bridge-ui/src/components/Tabs/Tabs.svelte
@@ -1,20 +1,22 @@
 <script lang="ts" context="module">
-  import { getContext } from 'svelte';
-  import type { Writable } from 'svelte/store';
-
   export const key = Symbol();
 </script>
 
 <script lang="ts">
-  import { writable } from 'svelte/store';
-  import { setContext } from 'svelte';
+  import { writable, type Writable } from 'svelte/store';
+  import { setContext, getContext } from 'svelte';
 
+  // Props
   export let activeTab = '';
 
   // State only available to the component and its descendants
   setContext(key, writable(activeTab));
-  const currentActiveTab = getContext<Writable<string>>(key);
-  $: $currentActiveTab = activeTab;
+
+  // We need to keep the store in sync with the prop in case the user
+  // navigates back in the browser, which will change the prop but not
+  // the Tabs' state
+  const storeActiveTab = getContext<Writable<string>>(key);
+  $: $storeActiveTab = activeTab;
 </script>
 
 <div class={$$restProps.class} style={$$restProps.style}>