diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/Form/index.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/Form/index.tsx
index 125d34c4f7..2c5bc8524d 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/Form/index.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/Form/index.tsx
@@ -409,7 +409,7 @@ export interface FormProps {
     formDiagnostics?: { message: string; severity: "ERROR" | "WARNING" | "INFO" }[];
     formDiagnosticsAction?: React.ReactNode;
     preserveOrder?: boolean;
-    handleSelectedTypeChange?: (type: string | CompletionItem) => void | Promise<void>;
+    handleSelectedTypeChange?: (type: string | CompletionItem) => void;
     scopeFieldAddon?: React.ReactNode;
     onChange?: (fieldKey: string, value: any, allValues: FormValues) => void;
     injectedComponents?: {
@@ -664,10 +664,12 @@ export const Form = forwardRef((props: FormProps, _ref) => {
         openSubPanel(updatedSubPanel);
     };
 
+    const handleOnTypeChange = () => {
+        getVisualiableFields();
+    };
+
     const handleNewTypeSelected = (type: string | CompletionItem) => {
-        Promise.resolve(handleSelectedTypeChange?.(type)).catch((error) => {
-            console.error("Error in handleSelectedTypeChange", error);
-        });
+        handleSelectedTypeChange && handleSelectedTypeChange(type);
     }
 
     const getVisualiableFields = () => {
@@ -1102,6 +1104,7 @@ export const Form = forwardRef((props: FormProps, _ref) => {
                                     autoFocus={firstEditableFieldIndex === formFields.indexOf(updatedField) && !hideSaveButton}
                                     recordTypeFields={recordTypeFields}
                                     onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
+                                    handleOnTypeChange={handleOnTypeChange}
                                     setSubComponentEnabled={setIsSubComponentEnabled}
                                     handleNewTypeSelected={handleNewTypeSelected}
                                     onBlur={handleOnBlur}
@@ -1202,6 +1205,7 @@ export const Form = forwardRef((props: FormProps, _ref) => {
                                             handleOnFieldFocus={handleOnFieldFocus}
                                             recordTypeFields={recordTypeFields}
                                             onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
+                                            handleOnTypeChange={handleOnTypeChange}
                                             onBlur={handleOnBlur}
                                         />
                                     </S.Row>
@@ -1241,6 +1245,7 @@ export const Form = forwardRef((props: FormProps, _ref) => {
                                     handleOnFieldFocus={handleOnFieldFocus}
                                     recordTypeFields={recordTypeFields}
                                     onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
+                                    handleOnTypeChange={handleOnTypeChange}
                                     onBlur={handleOnBlur}
                                     handleFormValidation={handleFormValidation}
                                 />
@@ -1270,6 +1275,7 @@ export const Form = forwardRef((props: FormProps, _ref) => {
                                 ((open: boolean, newType?: string | NodeProperties) => handleOpenRecordEditor(open, typeField, newType))
                             }
                             handleOnFieldFocus={handleOnFieldFocus}
+                            handleOnTypeChange={handleOnTypeChange}
                             recordTypeFields={recordTypeFields}
                             onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
                             handleNewTypeSelected={handleNewTypeSelected}
@@ -1285,6 +1291,7 @@ export const Form = forwardRef((props: FormProps, _ref) => {
                                 recordTypeFields={recordTypeFields}
                                 onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
                                 handleNewTypeSelected={handleNewTypeSelected}
+                                handleOnTypeChange={handleOnTypeChange}
                                 onBlur={handleOnBlur}
                                 handleFormValidation={handleFormValidation}
                             />
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/DeclareVariableForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/DeclareVariableForm/index.tsx
index f984a21fa8..1eeada6c0e 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/DeclareVariableForm/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/DeclareVariableForm/index.tsx
@@ -33,9 +33,7 @@ export const VariableForm = (props: FormProps) => {
     }, [props.formFields]);
 
     const handleOnTypeChange = (type: string | CompletionItem) => {
-        Promise.resolve(handleSelectedTypeChange?.(type)).catch((error) => {
-            console.error("Error in handleSelectedTypeChange", error);
-        });
+        handleSelectedTypeChange(type);
     };
     return (
         <>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx
index 3880835227..4ae89cdc71 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx
@@ -522,7 +522,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
             const updatedField = { ...field };
 
             const isRepeatableList = field.types?.length === 1 && getPrimaryInputType(field.types)?.fieldType === "REPEATABLE_LIST";
-            const selectedInputType = isRepeatableList ? getPrimaryInputType(field.types) : field.types?.find(t => t.selected);
+            const selectedInputType = isRepeatableList? getPrimaryInputType(field.types) : field.types?.find(t => t.selected);
 
             const nodeProperties = nodeWithDiagnostics?.properties as any;
             let propertyDiagnostics: any = nodeProperties?.[field.key]?.diagnostics?.diagnostics;
@@ -922,7 +922,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
 
         return Object.values(nodeProperties).some((property) => {
             let diagnostics: DiagnosticMessage[] = [];
-            if (property?.types?.length === 1 && getPrimaryInputType(property.types)?.fieldType === "REPEATABLE_LIST") {
+            if ( property?.types?.length === 1 && getPrimaryInputType(property.types)?.fieldType === "REPEATABLE_LIST") {
                 // For repeatable list, check diagnostics for each element in the list
                 const valueDiagnostics = (property.value as any[])?.map((val) => val?.diagnostics?.diagnostics ?? []).flat() ?? [];
                 diagnostics = [...diagnostics, ...valueDiagnostics];
@@ -1399,24 +1399,13 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
     /**
      * Handles type selection from completion items (used in type editor)
      */
-    const handleSelectedTypeChange = async (type: CompletionItem | string) => {
-        try {
-            if (typeof type === "string") {
-                await handleSelectedTypeByName(type);
-                return;
-            }
-            else {
-                // If the type is a Completion item, then it can be found in the reference types.
-                // Which cannot be an imported type.
-                importsCodedataRef.current = null;
-                await fetchVisualizableFields(fileName, (type as CompletionItem).label);
-            }
-            setSelectedType(type);
-            updateRecordTypeFields(type);
-        }
-        catch (error) {
-            console.error("Error handling selected type change", error);
+    const handleSelectedTypeChange = (type: CompletionItem | string) => {
+        if (typeof type === "string") {
+            handleSelectedTypeByName(type);
+            return;
         }
+        setSelectedType(type);
+        updateRecordTypeFields(type);
     };
 
     const findMatchedType = (items: TypeHelperItem[], typeName: string) => {
@@ -1474,23 +1463,15 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
     const handleSelectedTypeByName = async (typeName: string) => {
         // Early return for invalid input
         if (!typeName || typeName.length === 0) {
-            importsCodedataRef.current = null;
-            await fetchVisualizableFields(fileName, typeName);
             setValueTypeConstraints('');
             return;
         }
 
         const type = await searchImportedTypeByName(typeName);
         if (!type) {
-            importsCodedataRef.current = null;
-            await fetchVisualizableFields(fileName, typeName);
             setValueTypeConstraints('');
             return;
         }
-        else {
-            importsCodedataRef.current = type.codedata;
-            await fetchVisualizableFields(fileName, typeName);
-        }
 
         setValueTypeConstraints(type.insertText);
         // Create the record type field for expression