From 01730b35e938f8b010b8f710a746632217c955e0 Mon Sep 17 00:00:00 2001
From: Kiran Ashok <stepinfwd@gmail.com>
Date: Wed, 23 Mar 2022 20:49:48 +0530
Subject: [PATCH] [ Enhancement ] :: Tabs widget bug fixes (#2524)

* bugfix :: If we change the default tab field, the change is not immediately reflected on the widget
default tab field only accepts string value: make it reflect number values as well

* fixing exposed variable

* update

* cleanup

* pr changes updated : exposing current tab
---
 frontend/src/Editor/Components/Tabs.jsx      | 27 ++++++++++++++++----
 frontend/src/Editor/Components/components.js |  2 +-
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Editor/Components/Tabs.jsx b/frontend/src/Editor/Components/Tabs.jsx
index 4d1738401f..caebcede17 100644
--- a/frontend/src/Editor/Components/Tabs.jsx
+++ b/frontend/src/Editor/Components/Tabs.jsx
@@ -1,9 +1,18 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { SubCustomDragLayer } from '../SubCustomDragLayer';
 import { SubContainer } from '../SubContainer';
 import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
 
-export const Tabs = function Tabs({ id, component, width, height, containerProps, currentState, removeComponent }) {
+export const Tabs = function Tabs({
+  id,
+  component,
+  width,
+  height,
+  containerProps,
+  currentState,
+  removeComponent,
+  setExposedVariable,
+}) {
   const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
   const disabledState = component.definition.styles?.disabledState?.value ?? false;
   const defaultTab = component.definition.properties.defaultTab.value;
@@ -42,18 +51,26 @@ export const Tabs = function Tabs({ id, component, width, height, containerProps
   };
 
   const parentRef = useRef(null);
-
   const [currentTab, setCurrentTab] = useState(parsedDefaultTab);
 
+  useEffect(() => {
+    setCurrentTab(parsedDefaultTab);
+  }, [parsedDefaultTab]);
+
+  useEffect(() => {
+    setExposedVariable('currentTab', currentTab);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentTab]);
+
   return (
     <div data-disabled={parsedDisabledState} className="jet-tabs card" style={computedStyles}>
       <ul className="nav nav-tabs" data-bs-toggle="tabs">
         {parsedTabs.map((tab) => (
           <li className="nav-item" onClick={() => setCurrentTab(tab.id)} key={tab.id}>
             <a
-              className={`nav-link ${currentTab === tab.id ? 'active' : ''}`}
+              className={`nav-link ${currentTab == tab.id ? 'active' : ''}`}
               style={
-                currentTab === tab.id
+                currentTab == tab.id
                   ? { color: parsedHighlightColor, borderBottom: `1px solid ${parsedHighlightColor}` }
                   : {}
               }
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index e199cb8292..3124d947e7 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -1491,7 +1491,7 @@ export const componentTypes = [
       visibility: { type: 'toggle', displayName: 'Visibility' },
       disabledState: { type: 'toggle', displayName: 'Disable' },
     },
-    exposedVariables: {},
+    exposedVariables: { currentTab: '' },
     definition: {
       others: {
         showOnDesktop: { value: '{{true}}' },