From 9841c04ecf7cdc4e92aa2ecc75c0fac16902dcce Mon Sep 17 00:00:00 2001
From: wuxiaojun514 <wuxiaojun514@163.com>
Date: Thu, 19 Jun 2025 13:49:42 +0800
Subject: [PATCH 1/2] Add a new child control DropdownWithRemoveButton.tsx to
 allow user delete the selected item in Dropdown Choice field

---
 src/controls/dynamicForm/DynamicForm.tsx      |  4 +-
 .../dynamicField/DropdownWithRemoveButton.tsx | 39 +++++++++++++++++++
 .../dynamicForm/dynamicField/DynamicField.tsx |  3 +-
 3 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 src/controls/dynamicForm/dynamicField/DropdownWithRemoveButton.tsx

diff --git a/src/controls/dynamicForm/DynamicForm.tsx b/src/controls/dynamicForm/DynamicForm.tsx
index 3d3de473e..e40544bb2 100644
--- a/src/controls/dynamicForm/DynamicForm.tsx
+++ b/src/controls/dynamicForm/DynamicForm.tsx
@@ -470,7 +470,7 @@ export class DynamicFormBase extends React.Component<
           // Choice fields
 
           if (fieldType === "Choice") {
-            objects[fieldcolumnInternalName] = field.newValue.key;
+            objects[fieldcolumnInternalName] = field.newValue?field.newValue.key:null
           }
           if (fieldType === "MultiChoice") {
             objects[fieldcolumnInternalName] = { results: field.newValue };
@@ -781,7 +781,7 @@ export class DynamicFormBase extends React.Component<
     // Store string values for various field types
 
     if (field.fieldType === "Choice") {
-      field.stringValue = newValue.text;
+        field.stringValue = newValue? newValue.text:'';
     }
     if (field.fieldType === "MultiChoice") {
       field.stringValue = newValue.join(';#');
diff --git a/src/controls/dynamicForm/dynamicField/DropdownWithRemoveButton.tsx b/src/controls/dynamicForm/dynamicField/DropdownWithRemoveButton.tsx
new file mode 100644
index 000000000..27a2c9060
--- /dev/null
+++ b/src/controls/dynamicForm/dynamicField/DropdownWithRemoveButton.tsx
@@ -0,0 +1,39 @@
+import { Dropdown, IconButton, IDropdownProps, IIconProps } from "@fluentui/react";
+import React from "react";
+import { useState } from "react";
+
+
+
+export const DropdownWithRemoveButton = (props: IDropdownProps): JSX.Element => {
+    const [isEditing, setIsEditing] = useState(false);
+
+    const titleRendererWithRemoveButton: IDropdownProps["onRenderTitle"] = (options) => {
+        const iconStyles = {
+            root: { "font-size": '12px' }
+        };
+        const removeIcon: IIconProps = { iconName: 'Clear', styles: iconStyles };
+        return (
+            <div>
+                <span><span>{options[0].text}</span>
+                    {
+                        isEditing && <IconButton onClick={(e) => {
+                            props.onChange(null, null);
+                            e.stopPropagation();
+                        }} iconProps={removeIcon} title="Remove" ariaLabel="Remove" />
+                    }
+                </span>
+            </div>
+        );
+    };
+
+    return (
+        <Dropdown
+            {...props}
+            onRenderTitle={titleRendererWithRemoveButton}
+            onBlur={(e) => { setIsEditing(false); if (props.onBlur) { props.onBlur(e) } }}
+            onFocus={(e) => { setIsEditing(true); if (props.onFocus) { props.onFocus(e) } }}
+        />
+
+    )
+
+}
\ No newline at end of file
diff --git a/src/controls/dynamicForm/dynamicField/DynamicField.tsx b/src/controls/dynamicForm/dynamicField/DynamicField.tsx
index b5d8f00a5..301bfc173 100644
--- a/src/controls/dynamicForm/dynamicField/DynamicField.tsx
+++ b/src/controls/dynamicForm/dynamicField/DynamicField.tsx
@@ -26,6 +26,7 @@ import { ModernTaxonomyPicker } from '../../modernTaxonomyPicker';
 import { classNamesFunction, IProcessedStyleSet, styled, ChoiceGroup, IChoiceGroupOption } from '@fluentui/react';
 import { getFluentUIThemeOrDefault } from '../../../common/utilities/ThemeUtility';
 import { getFieldStyles } from './DynamicField.styles';
+import { DropdownWithRemoveButton } from './DropdownWithRemoveButton';
 
 const getClassNames = classNamesFunction<IDynamicFieldStyleProps, IDynamicFieldStyles>();
 
@@ -195,7 +196,7 @@ export class DynamicFieldBase extends React.Component<IDynamicFieldProps, IDynam
 
         // If the choiceType is dropdown
         if (choiceType === ChoiceFieldFormatType.Dropdown) {
-          choiceControl = <Dropdown
+          choiceControl = <DropdownWithRemoveButton
             {...dropdownOptions}
             defaultSelectedKey={valueToDisplay ? undefined : defaultValue}
             selectedKey={typeof valueToDisplay === "object" ? valueToDisplay?.key : valueToDisplay}

From 3168597df056855fa89ec9384b51b968d4eefb75 Mon Sep 17 00:00:00 2001
From: wuxiaojun514 <wuxiaojun514@163.com>
Date: Thu, 19 Jun 2025 15:47:48 +0800
Subject: [PATCH 2/2] use onMouseLeave instead of onBlur to check if user leave
 the editing mode

---
 .../dynamicForm/dynamicField/DropdownWithRemoveButton.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controls/dynamicForm/dynamicField/DropdownWithRemoveButton.tsx b/src/controls/dynamicForm/dynamicField/DropdownWithRemoveButton.tsx
index 27a2c9060..0deac82e5 100644
--- a/src/controls/dynamicForm/dynamicField/DropdownWithRemoveButton.tsx
+++ b/src/controls/dynamicForm/dynamicField/DropdownWithRemoveButton.tsx
@@ -30,7 +30,7 @@ export const DropdownWithRemoveButton = (props: IDropdownProps): JSX.Element =>
         <Dropdown
             {...props}
             onRenderTitle={titleRendererWithRemoveButton}
-            onBlur={(e) => { setIsEditing(false); if (props.onBlur) { props.onBlur(e) } }}
+            onMouseLeave={(e) => { setIsEditing(false); if (props.onMouseLeave) { props.onMouseLeave(e) }}}
             onFocus={(e) => { setIsEditing(true); if (props.onFocus) { props.onFocus(e) } }}
         />