Revert "add support in Dropdown for creating new options using allowCreateOptions prop (#1107)"This reverts commit 646d154. (#1123)

anserwaseem · web-flow · commit 8cd1c3d114b3 · 2025-10-24T16:23:16.000+05:00
diff --git a/.changeset/chatty-mails-yell.md b/.changeset/chatty-mails-yell.md
@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+Revert "add support in Dropdown for creating new options using allowCreateOptions prop (#1107)"This reverts commit 646d1543151dd84a30da641cc1cf2b08e24a0b2a.
diff --git a/apps/kitchen-sink/src/ensemble/screens/forms.yaml b/apps/kitchen-sink/src/ensemble/screens/forms.yaml
@@ -175,20 +175,6 @@ View:
                         onChange:
                           executeCode: |
                             console.log('dropdown changed', value);
-                    - Dropdown:
-                        id: dropdownWithCreateOptions
-                        label: Dropdown with create options
-                        hintText: Try typing "New Option"
-                        allowCreateOptions: true
-                        value: option2
-                        items:
-                          - label: Option 1
-                            value: option1
-                          - label: Option 2
-                            value: option2
-                        onChange:
-                          executeCode: |
-                            console.log('dropdownWithCreateOptions changed', value);
                     # If you omit id, the form value key will be the label
                     - TextInput:
                         id: formTextInput
diff --git a/packages/runtime/src/widgets/Form/Dropdown.tsx b/packages/runtime/src/widgets/Form/Dropdown.tsx
@@ -1,12 +1,5 @@
-import { Select, Form, Space } from "antd";
-import { PlusCircleOutlined } from "@ant-design/icons";
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { Select, Form } from "antd";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   CustomScopeProvider,
   evaluate,
@@ -20,7 +13,7 @@ import type {
   EnsembleAction,
   Expression,
 } from "@ensembleui/react-framework";
-import { get, isEmpty, isNull, isObject, isString } from "lodash-es";
+import { get, isArray, isEmpty, isNull, isObject, isString } from "lodash-es";
 import { WidgetRegistry } from "../../registry";
 import type {
   EnsembleWidgetProps,
@@ -33,7 +26,6 @@ import { getComponentStyles } from "../../shared/styles";
 import type { HasBorder } from "../../shared/hasSchema";
 import type { FormInputProps } from "./types";
 import { EnsembleFormItem } from "./FormItem";
-import { updateFieldValue } from "./Form";
 
 const widgetName = "Dropdown";
 
@@ -64,7 +56,6 @@ export type DropdownProps = {
   autoComplete: Expression<boolean>;
   hintStyle?: EnsembleWidgetStyles;
   panel?: { [key: string]: unknown };
-  allowCreateOptions?: boolean;
 } & EnsembleWidgetProps<DropdownStyles> &
   HasItemTemplate & {
     "item-template"?: { value: Expression<string> };
@@ -73,49 +64,11 @@ export type DropdownProps = {
 const DropdownRenderer = (
   menu: React.ReactElement,
   panel?: { [key: string]: unknown },
-  newOption?: string,
-  onAddNewOption?: (value: string) => void,
 ): React.ReactElement => {
   const panelOption = useMemo(() => {
     return panel ? EnsembleRuntime.render([unwrapWidget(panel)]) : null;
   }, []);
 
-  // if we have a new option to add, show custom content along with the menu
-  if (newOption) {
-    return (
-      <>
-        <div style={{ padding: "10px 15px" }}>
-          <span>There are no matches</span>
-        </div>
-        <Space
-          style={{
-            padding: "10px 15px",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "flex-start",
-            width: "100%",
-            cursor: "pointer",
-          }}
-          onClick={() => onAddNewOption?.(newOption)}
-        >
-          <Space>
-            <PlusCircleOutlined />
-            <span>{`Add "${newOption}"`}</span>
-          </Space>
-        </Space>
-        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-        <div
-          onMouseDown={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-          }}
-        >
-          {panelOption}
-        </div>
-      </>
-    );
-  }
-
   return (
     <>
       {menu}
@@ -136,10 +89,8 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
   const [selectedValue, setSelectedValue] = useState<
     string | number | undefined
   >();
-  const [newOption, setNewOption] = useState("");
+
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const [items, setItems] = useState<SelectOption[]>([]);
-  const initializedRef = useRef(false);
   const {
     "item-template": itemTemplate,
     onChange,
@@ -173,21 +124,8 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
     (value?: number | string) => {
       setSelectedValue(value);
       onChangeAction?.callback({ value });
-
-      // if the selected value is a new option that doesn't exist in items, add it
-      if (value && values?.allowCreateOptions) {
-        const optionExists = items.find((item) => item.value === value);
-        if (!optionExists) {
-          const newItem: SelectOption = {
-            label: value.toString(),
-            value: value,
-          };
-          setItems((prevItems) => [...prevItems, newItem]);
-        }
-      }
-      setNewOption("");
     },
-    [onChangeAction?.callback, values?.allowCreateOptions, items],
+    [onChangeAction?.callback],
   );
 
   const onItemSelectAction = useEnsembleAction(onItemSelect);
@@ -199,60 +137,16 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
     [onItemSelectAction?.callback],
   );
 
-  const handleSearch = (value: string): void => {
-    if (!values?.allowCreateOptions) {
-      return;
-    }
-
-    const isOptionExist = items.find((option) =>
-      option.label.toString().toLowerCase().includes(value.toLowerCase()),
-    );
-
-    if (!isOptionExist && value.trim()) {
-      setNewOption(value);
-    } else {
-      setNewOption("");
-    }
-  };
-
-  const handleAddNewOption = useCallback(
-    (value: string) => {
-      const newItem: SelectOption = {
-        label: value,
-        value: value,
-      };
-      setItems((prevItems) => [...prevItems, newItem]);
-
-      setSelectedValue(value);
-      onChangeAction?.callback({ value });
-
-      // trigger form's onChange action
-      updateFieldValue(formInstance, values?.id ?? values?.label ?? "", value);
-
-      setNewOption("");
-      setIsOpen(false);
-    },
-    [onChangeAction?.callback],
-  );
-
   const { namedData } = useTemplateData({
     data: itemTemplate?.data,
     name: itemTemplate?.name,
   });
 
-  // initialize items from props only once
-  useEffect(() => {
-    if (values?.items && !initializedRef.current) {
-      setItems(values.items);
-      initializedRef.current = true;
-    }
-  }, [values?.items]);
-
   const options = useMemo(() => {
     let dropdownOptions: React.ReactNode[] | null = null;
 
-    if (items.length > 0) {
-      const tempOptions = items.map((item) => {
+    if (values?.items && isArray(values.items)) {
+      const tempOptions = values.items.map((item) => {
         if (item.type === "group") {
           // Render a group item with sub-items
           return (
@@ -312,7 +206,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
     }
 
     return dropdownOptions;
-  }, [items, namedData, itemTemplate]);
+  }, [values?.items, namedData, itemTemplate]);
 
   const { backgroundColor: _, ...formItemStyles } = values?.styles ?? {};
 
@@ -409,24 +303,17 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
       <div ref={rootRef} style={{ flex: 1, ...formItemStyles }}>
         <EnsembleFormItem values={values}>
           <Select
-            key={`${id}-${items.length}`}
             allowClear={values?.allowClear ?? true}
             className={`${values?.styles?.names || ""} ${id}_input`}
             defaultValue={values?.value}
             disabled={values?.enabled === false}
             dropdownRender={(menu): React.ReactElement =>
-              DropdownRenderer(
-                menu,
-                values?.panel,
-                newOption,
-                handleAddNewOption,
-              )
+              DropdownRenderer(menu, values?.panel)
             }
             dropdownStyle={values?.styles}
             id={values?.id}
             onChange={handleChange}
             onDropdownVisibleChange={(state): void => setIsOpen(state)}
-            onSearch={values?.allowCreateOptions ? handleSearch : undefined}
             onSelect={onItemSelectCallback}
             open={isOpen}
             placeholder={
@@ -437,10 +324,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
               )
             }
             optionFilterProp="children"
-            showSearch={
-              Boolean(values?.autoComplete) ||
-              Boolean(values?.allowCreateOptions)
-            }
+            showSearch={Boolean(values?.autoComplete)}
             value={values?.selectedValue}
           >
             {options}
diff --git a/packages/runtime/src/widgets/Form/Form.tsx b/packages/runtime/src/widgets/Form/Form.tsx
@@ -6,7 +6,7 @@ import {
 import { Form as AntForm } from "antd";
 import type { FormProps as AntFormProps } from "antd";
 import { useCallback, useState } from "react";
-import type { FormInstance, FormLayout } from "antd/es/form/Form";
+import type { FormLayout } from "antd/es/form/Form";
 import { set } from "lodash-es";
 import { WidgetRegistry } from "../../registry";
 import { EnsembleRuntime } from "../../runtime";
@@ -129,44 +129,3 @@ const getLayout = (labelPosition?: string): FormLayout => {
 };
 
 WidgetRegistry.register(widgetName, Form);
-
-/**
- * Programmatically update the value of a field and trigger Ant Design's `onFieldsChange`
- * (or Ensemble Form's `onChange` action).
- *
- * Normally, calling `form.setFieldValue` or `form.setFieldsValue` does not fire `onFieldsChange`.
- * This helper uses Ant Design's internal `dispatch` mechanism to register the update
- * as if it were user-driven, so that `onFieldsChange` fires consistently.
- *
- * This is especially useful for widgets that update values programmatically
- * (e.g. Dropdown with `allowCreateOptions`).
- *
- * Alternatively, one could use Ant Design's `Form.useWatch`, but this approach
- * is less performant for large forms.
- *
- * ⚠️ Relies on Ant Design's private API (`RC_FORM_INTERNAL_HOOKS`), which may change
- * in future versions.
- *
- * Reference: https://github.com/ant-design/ant-design/issues/23782#issuecomment-2114700558
- */
-export function updateFieldValue<Values>(
-  form: FormInstance<Values>,
-  name: string,
-  value: unknown,
-): void {
-  type InternalForm = FormInstance<Values> & {
-    getInternalHooks: (hook: string) => {
-      dispatch: (action: {
-        type: string;
-        namePath: string[];
-        value: unknown;
-      }) => void;
-    };
-  };
-
-  (form as InternalForm).getInternalHooks("RC_FORM_INTERNAL_HOOKS").dispatch({
-    type: "updateValue",
-    namePath: [name],
-    value,
-  });
-}
diff --git a/packages/runtime/src/widgets/Form/__tests__/Dropdown.test.tsx b/packages/runtime/src/widgets/Form/__tests__/Dropdown.test.tsx
