fix: improving multipart form data body

app/client/src/components/editorComponents/DropdownComponent.tsx

@@ -38,16 +38,18 @@ const StyledMenu = styled(Menu)<MenuComponentProps>`
 `;
 const StyledMenuItem = styled(MenuItem)`
   border-radius: 0;
-
   &&&.bp3-active {
     background: ${(props) => props.theme.colors.propertyPane.activeButtonText};
   }
 `;
 
 class DropdownComponent extends Component<DropdownComponentProps> {
   componentDidMount() {
-    const { input, selected } = this.props;
-    input && input.onChange(selected?.value);
+    const { input, options } = this.props;
+    // set selected option to first option by default
+    if (input && !input.value) {
+      input.onChange(options[0].value);
+    }
   }
   private newItemTextInput: HTMLInputElement | null = null;
   private setNewItemTextInput = (element: HTMLInputElement | null) => {
@@ -111,8 +113,9 @@ class DropdownComponent extends Component<DropdownComponentProps> {
     );
   };
   onItemSelect = (item: DropdownOption): void => {
-    this.props.input?.onChange(item.value);
-    this.props.selectHandler(item.value);
+    const { input, selectHandler } = this.props;
+    input && input.onChange(item.value);
+    selectHandler && selectHandler(item.value);
   };
 
   renderItem: ItemRenderer<DropdownOption> = (
@@ -133,24 +136,42 @@ class DropdownComponent extends Component<DropdownComponentProps> {
       />
     );
   };
+
+  getDropdownOption = (value: string): DropdownOption | undefined => {
+    return this.props.options.find((option) => option.value === value);
+  };
+
   getSelectedDisplayText = () => {
-    if (this.props.selected) {
-      const selectedValue = this.props.selected.value;
-      const item: DropdownOption | undefined = this.props.options.find(
-        (option) => option.value === selectedValue,
-      );
+    const { input, selected } = this.props;
 
+    if (input) {
+      const item = this.getDropdownOption(input.value);
+      return item && item.label;
+    }
+    if (selected) {
+      const item = this.getDropdownOption(selected.value);
       return item && item.label;
     }
     return "";
   };
 
+  getActiveOption = (): DropdownOption => {
+    const { input, options, selected } = this.props;
+    const defaultActiveOption = options[0];
+
+    if (input) {
+      return this.getDropdownOption(input.value) || defaultActiveOption;
+    } else {
+      return selected || defaultActiveOption;
+    }
+  };
+
   render() {
-    const { autocomplete, input, options, selected, width } = this.props;
+    const { autocomplete, input, options, width } = this.props;
 
     return (
       <StyledDropdown
-        activeItem={selected}
+        activeItem={this.getActiveOption()}
         filterable={!!autocomplete}
         itemListRenderer={this.renderItemList}
         itemPredicate={this.searchItem}
@@ -180,7 +201,7 @@ class DropdownComponent extends Component<DropdownComponentProps> {
 export interface DropdownComponentProps {
   hasLabel?: boolean;
   options: DropdownOption[];
-  selectHandler: (selectedValue: string) => void;
+  selectHandler?: (selectedValue: string) => void;
   selected?: DropdownOption;
   multiselectDisplayType?: "TAGS" | "CHECKBOXES";
   checked?: boolean;

app/client/src/components/editorComponents/form/fields/DynamicDropdownField.tsx

@@ -9,38 +9,9 @@ interface DynamicDropdownFieldOptions {
 }
 
 type DynamicDropdownFieldProps = BaseFieldProps & DynamicDropdownFieldOptions;
-
-class DynamicDropdownField extends React.Component<
-  DynamicDropdownFieldProps,
-  {
-    selectedOption: DropdownOption;
-  }
-> {
-  constructor(props: DynamicDropdownFieldProps) {
-    super(props);
-    this.state = {
-      selectedOption: this.props.options[0],
-    };
-  }
-
-  handleOptionSelection = (selectedValue: string): void => {
-    const selectedOption = this.props.options.find(
-      (option) => option.value === selectedValue,
-    ) as DropdownOption;
-    this.setState({
-      selectedOption,
-    });
-  };
-
+class DynamicDropdownField extends React.Component<DynamicDropdownFieldProps> {
   render() {
-    const dropdownProps = {
-      selectHandler: this.handleOptionSelection,
-      selected: this.state.selectedOption,
-    };
-
-    return (
-      <Field component={DropdownComponent} {...this.props} {...dropdownProps} />
-    );
+    return <Field component={DropdownComponent} {...this.props} />;
   }
 }
 

app/client/src/pages/Editor/APIEditor/PostBodyData.tsx

@@ -102,7 +102,6 @@ function PostBodyData(props: Props) {
           key={key}
           label=""
           name="actionConfiguration.bodyFormData"
-          pushFields
           theme={theme}
         />
       ),

app/client/src/sagas/ApiPaneSagas.ts

@@ -185,7 +185,10 @@ function* handleUpdateBodyContentType(
     change(API_EDITOR_FORM_NAME, "actionConfiguration.headers", headers),
   );
 
-  if (displayFormatObject.value === POST_BODY_FORMATS[1]) {
+  if (
+    displayFormatObject.value === POST_BODY_FORMATS[1] ||
+    displayFormatObject.value === POST_BODY_FORMATS[2]
+  ) {
     if (!bodyFormData || bodyFormData.length === 0) {
       yield put(
         change(