From 9841c04ecf7cdc4e92aa2ecc75c0fac16902dcce Mon Sep 17 00:00:00 2001 From: wuxiaojun514 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 ( +
+ {options[0].text} + { + isEditing && { + props.onChange(null, null); + e.stopPropagation(); + }} iconProps={removeIcon} title="Remove" ariaLabel="Remove" /> + } + +
+ ); + }; + + return ( + { 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(); @@ -195,7 +196,7 @@ export class DynamicFieldBase extends React.Component 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 => { 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) } }} />