Merge pull request #2016 from wuxiaojun514/2014

Hotfix for issue 2014

Author: joaojmendes

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(';#');

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}
+            onMouseLeave={(e) => { setIsEditing(false); if (props.onMouseLeave) { props.onMouseLeave(e) }}}
+            onFocus={(e) => { setIsEditing(true); if (props.onFocus) { props.onFocus(e) } }}
+        />
+
+    )
+
+}

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}