From 7b6195f28b3ca453825c6c2064de69c09d7c3715 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 21 Nov 2024 16:25:13 +0530
Subject: [PATCH] fix: Component `<woot-tabs />` reactivity issue. (#10476)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request Template

## Description

This PR will fix reactivity issue with `<woot-tabs />` component.

**Cause of issue**
The `<woot-tabs />` component used an internal ref,
`internalActiveIndex` to track the `active` tab. However, it didn’t sync
with the `index` prop when updated by the parent, causing mismatched tab
selections.

**Solution**
The component now directly uses `props.index` to ensure it always
reflects the latest value from the parent. The unnecessary
`internalActiveIndex` ref has been removed. Changes to the active tab
emit a `change` event to update the parent.


## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

**Loom video**

**Before**

https://www.loom.com/share/76eb32f1e7f7422f84055a102bf80951?sid=bc28c6ff-9640-4d3b-956c-99c1ec164971

**After**

https://www.loom.com/share/6bd8125ede5d43dc8fe115c3f1fb159b?sid=c376617a-94fb-4f71-8664-e0bd9e7af0b4

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 app/javascript/dashboard/components/ui/Tabs/Tabs.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
index 682957204..3a7344fb4 100644
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
@@ -1,5 +1,4 @@
 <script setup>
-// [VITE] TODO: Test this component across different screen sizes and usages
 import { ref, provide, onMounted, computed } from 'vue';
 import { useEventListener } from '@vueuse/core';
 
@@ -17,15 +16,10 @@ const props = defineProps({
 const emit = defineEmits(['change']);
 
 const hasScroll = ref(false);
-// TODO: We may not this internalActiveIndex, we can use activeIndex directly
-// But right I'll keep it and fix it when testing the rest of the codebase
-const internalActiveIndex = ref(props.index);
 
-// Create a proxy for activeIndex using computed
 const activeIndex = computed({
-  get: () => internalActiveIndex.value,
+  get: () => props.index,
   set: newValue => {
-    internalActiveIndex.value = newValue;
     emit('change', newValue);
   },
 });