fix the multi type

Author: shubhamraj-git

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldMultiType.tsx

@@ -0,0 +1,64 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Textarea } from "@chakra-ui/react";
+
+import { paramPlaceholder, useParamStore } from "src/queries/useParamStore";
+
+import type { FlexibleFormElementProps } from ".";
+
+export const FieldMultiType = ({ name, namespace = "default", onUpdate }: FlexibleFormElementProps) => {
+  const { disabled, paramsDict, setParamsDict } = useParamStore(namespace);
+  const param = paramsDict[name] ?? paramPlaceholder;
+
+  // Display objects as pretty-printed JSON, plain strings as-is.
+  const displayValue =
+    param.value !== null && typeof param.value === "object"
+      ? JSON.stringify(param.value, undefined, 2)
+      : String(param.value ?? "");
+
+  const handleChange = (value: string) => {
+    if (paramsDict[name]) {
+      if (value === "") {
+        // "undefined" values are removed from params, so we set it to null to avoid falling back to DAG defaults.
+        paramsDict[name].value = null;
+      } else {
+        try {
+          paramsDict[name].value = JSON.parse(value) as JSON;
+        } catch {
+          paramsDict[name].value = value;
+        }
+      }
+    }
+
+    setParamsDict(paramsDict);
+    onUpdate(value);
+  };
+
+  return (
+    <Textarea
+      disabled={disabled}
+      id={`element_${name}`}
+      name={`element_${name}`}
+      onChange={(event) => handleChange(event.target.value)}
+      rows={6}
+      size="sm"
+      value={displayValue}
+    />
+  );
+};

airflow-core/src/airflow/ui/src/components/FlexibleForm/FieldSelector.tsx

@@ -26,6 +26,7 @@ import { FieldDateTime } from "./FieldDateTime";
 import { FieldDropdown } from "./FieldDropdown";
 import { FieldMultiSelect } from "./FieldMultiSelect";
 import { FieldMultilineText } from "./FieldMultilineText";
+import { FieldMultiType } from "./FieldMultiType";
 import { FieldNumber } from "./FieldNumber";
 import { FieldObject } from "./FieldObject";
 import { FieldString } from "./FieldString";
@@ -88,6 +89,10 @@ const isFieldObject = (fieldType: string) => fieldType === "object";
 const isFieldStringArray = (fieldType: string, fieldSchema: ParamSchema) =>
   fieldType === "array" && (fieldSchema.items?.type === undefined || fieldSchema.items.type === "string");
 
+const isFieldMultiType = (fieldSchema: ParamSchema) =>
+  Array.isArray(fieldSchema.type) &&
+  fieldSchema.type.filter((type) => type !== "null").length > 1;
+
 const isFieldTime = (fieldType: string, fieldSchema: ParamSchema) =>
   fieldType === "string" && fieldSchema.format === "time";
 
@@ -105,6 +110,12 @@ export const FieldSelector = ({ name, namespace = "default", onUpdate }: Flexibl
     value: currentParam?.value ?? initialParam.value,
   };
 
+  // Check for multiple non-null types before inferring a single type —
+  // inferType picks only the first, discarding the others.
+  if (isFieldMultiType(param.schema)) {
+    return <FieldMultiType name={name} namespace={namespace} onUpdate={onUpdate} />;
+  }
+
   const fieldType = inferType(param);
 
   if (isFieldBool(fieldType)) {