Thulasizwe/bug/3259

shesha-reactjs/src/components/formDesigner/componentPropertiesPanel/index.tsx

@@ -21,3 +21,4 @@ const ComponentPropertiesPanelInner: FC = () => {
 };
 
 export const ComponentPropertiesPanel = React.memo(ComponentPropertiesPanelInner);
+

shesha-reactjs/src/designer-components/propertiesTabs/models.ts

@@ -24,7 +24,6 @@ export interface ITabPaneProps
 export interface IPropertiesTabsComponentProps extends IConfigurableFormComponent {
   tabs: ITabPaneProps[];
   size?: SizeType;
-  defaultActiveKey?: string;
   tabType?: 'line' | 'card';
   hidden?: boolean;
   customVisibility?: string;

shesha-reactjs/src/designer-components/propertiesTabs/searchableTabsComponent.tsx

@@ -8,6 +8,7 @@ import { filterDynamicComponents } from './utils';
 import { IPropertiesTabsComponentProps } from './models';
 import { useFormStateOrUndefined, useFormActionsOrUndefined } from '@/providers/form';
 import { useShaFormDataUpdate } from '@/providers/form/providers/shaFormProvider';
+import { useFormDesignerActiveSettingsTabKey, useFormDesigner } from '@/providers/formDesigner';
 
 interface SearchableTabsProps {
   model: IPropertiesTabsComponentProps;
@@ -16,12 +17,16 @@ interface SearchableTabsProps {
 const SearchableTabs: React.FC<SearchableTabsProps> = ({ model }) => {
   const { tabs } = model;
   const [searchQuery, setSearchQuery] = useState('');
-  const [activeTabKey, setActiveTabKey] = useState('1');
   const searchRefs = useRef(new Map());
   const { styles } = useStyles();
 
   const formState = useFormStateOrUndefined();
   const formActions = useFormActionsOrUndefined();
+  const formDesigner = useFormDesigner();
+  const persistedActiveTabKey = useFormDesignerActiveSettingsTabKey();
+
+  // Use persisted tab key if available, otherwise default to first tab
+  const activeTabKey = persistedActiveTabKey ?? '1';
 
   useShaFormDataUpdate();
 
@@ -69,9 +74,9 @@ const SearchableTabs: React.FC<SearchableTabsProps> = ({ model }) => {
     }
   }, [activeTabKey]);
 
-  const handleTabChange = useCallback((newActiveKey: string): void => {
-    setActiveTabKey(newActiveKey);
-  }, [setActiveTabKey]);
+  const handleTabChange = (newActiveKey: string): void => {
+    formDesigner.setActiveSettingsTabKey(newActiveKey);
+  };
 
   // Focus search input when search query changes and we have matching results
   useEffect(() => {
@@ -164,19 +169,17 @@ const SearchableTabs: React.FC<SearchableTabsProps> = ({ model }) => {
         Array.isArray(tab.components) ? tab.components.length > 0 : !!tab.components,
       );
       if (firstVisibleTab && firstVisibleTab.key !== activeTabKey) {
-        setActiveTabKey(firstVisibleTab.key);
+        formDesigner.setActiveSettingsTabKey(firstVisibleTab.key);
       }
     }
-  }, [searchQuery, newFilteredTabs, activeTabKey]);
+  }, [searchQuery, newFilteredTabs, activeTabKey, formDesigner]);
 
   // Ensure we have a valid active tab key
   useEffect(() => {
     if (newFilteredTabs.length > 0 && !newFilteredTabs.find((tab) => tab.key === activeTabKey)) {
-      setActiveTabKey(newFilteredTabs[0].key);
+      formDesigner.setActiveSettingsTabKey(newFilteredTabs[0].key);
     }
-  }, [newFilteredTabs, activeTabKey]);
-
-  const tabPlacement = model.position === 'left' ? 'start' : model.position === 'right' ? 'end' : model.position;
+  }, [newFilteredTabs, activeTabKey, formDesigner]);
 
   const localTabs = useMemo(() => (
     <Tabs
@@ -185,11 +188,11 @@ const SearchableTabs: React.FC<SearchableTabsProps> = ({ model }) => {
       onChange={handleTabChange}
       size={model.size}
       type={model.tabType || 'card'}
-      tabPlacement={tabPlacement || 'top'}
+      tabPosition={model.position || 'top'}
       items={newFilteredTabs}
       className={styles.content}
     />
-  ), [activeTabKey, handleTabChange, model.size, model.tabType, newFilteredTabs, styles.content, tabPlacement]);
+  ), [activeTabKey, handleTabChange, model.size, model.tabType, newFilteredTabs, styles.content, model.position]);
 
   return (
     <>

shesha-reactjs/src/providers/formDesigner/contexts.tsx

@@ -89,6 +89,7 @@ export type FormDesignerState = {
   isDebug: boolean;
   readOnly: boolean;
   formMode: FormMode;
+  activeSettingsTabKey: string | undefined;
 
   settingsPanelRef: MutableRefObject<HTMLDivElement | undefined>;
 };
@@ -118,6 +119,7 @@ export type FormDesignerActions = {
 
   setReadOnly: (value: boolean) => void;
   setFormMode: (value: FormMode) => void;
+  setActiveSettingsTabKey: (key: string) => void;
 
   getCachedComponentEditor: (type: string, evaluator: () => ISettingsFormFactory) => ISettingsFormFactory;
 

shesha-reactjs/src/providers/formDesigner/index.tsx

@@ -134,6 +134,11 @@ const useFormDesignerUndoRedo = (): IUndoable => {
   };
 };
 
+const useFormDesignerActiveSettingsTabKey = (): string | undefined => {
+  useFormDesignerSubscription('settings-tab');
+  return useFormDesigner().activeSettingsTabKey;
+};
+
 export {
   FormDesignerProvider,
   useFormDesignerOrUndefined,
@@ -147,4 +152,5 @@ export {
   useFormDesignerFormMode,
   useFormDesignerUndoRedo,
   useFormDesignerIsModified,
+  useFormDesignerActiveSettingsTabKey,
 };

shesha-reactjs/src/providers/formDesigner/instance.ts

@@ -83,6 +83,8 @@ export class FormDesignerInstance implements IFormDesignerInstance {
 
   formMode: FormMode;
 
+  activeSettingsTabKey: string | undefined;
+
   get state(): FormDesignerFormState {
     return this.undoableState.getState();
   }
@@ -98,6 +100,7 @@ export class FormDesignerInstance implements IFormDesignerInstance {
     this.isDragging = false;
     this.hasDragged = false;
     this.isDataModified = false;
+    this.activeSettingsTabKey = undefined;
     this.subscriptions = new Map<FormDesignerSubscriptionType, Set<FormDesignerSubscription>>();
 
     // eslint-disable-next-line no-console
@@ -718,6 +721,12 @@ export class FormDesignerInstance implements IFormDesignerInstance {
     this.notifySubscribers(['mode']);
   };
 
+  setActiveSettingsTabKey = (key: string): void => {
+    if (this.activeSettingsTabKey === key) return;
+    this.activeSettingsTabKey = key;
+    this.notifySubscribers(['settings-tab']);
+  };
+
   componentEditors: IComponentSettingsEditorsCache = {};
 
   getCachedComponentEditor = (type: string, evaluator: () => ISettingsFormFactory): ISettingsFormFactory => {

shesha-reactjs/src/providers/formDesigner/models.ts

@@ -28,7 +28,7 @@ export type IComponentSettingsEditorsCache = Record<string, ISettingsFormFactory
 export type RerenderTrigger = () => void;
 
 export type FormDesignerSubscription = (designer: IFormDesignerInstance) => void;
-export type FormDesignerSubscriptionType = 'markup' | 'selection' | 'readonly' | 'mode' | 'debug' | 'history' | 'data-modified';
+export type FormDesignerSubscriptionType = 'markup' | 'selection' | 'readonly' | 'mode' | 'debug' | 'history' | 'data-modified' | 'settings-tab';
 
 export interface AddComponentPayloadBase {
   index: number;