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..0deac82e5 --- /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.onMouseLeave) { props.onMouseLeave(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