@firecms/core 3.2.0 → 3.3.0-canary.451aa49

package/src/form/EntityForm.tsx

@@ -125,6 +125,35 @@ export function extractTouchedValues(values: any, touched: Record<string, boolea
     return acc;
 }
 
+/**
+ * Recursively removes empty plain objects `{}` and empty arrays `[]` from a value tree.
+ * This prevents ghost containers created by `setIn` intermediate path construction
+ * (e.g. `{ address: {} }` when only `address.city` was touched but value is undefined)
+ * from falsely triggering the unsaved local changes indicator.
+ */
+function removeEmptyContainers(obj: any): any {
+    if (Array.isArray(obj)) {
+        const cleaned = obj.map(removeEmptyContainers);
+        // Keep arrays even if they contain only nulls/undefined — that's intentional data
+        return cleaned;
+    }
+    if (obj && typeof obj === "object" && Object.getPrototypeOf(obj) === Object.prototype) {
+        const result: Record<string, any> = {};
+        for (const key of Object.keys(obj)) {
+            const cleaned = removeEmptyContainers(obj[key]);
+            // Skip empty plain objects
+            if (cleaned && typeof cleaned === "object" && !Array.isArray(cleaned)
+                && Object.getPrototypeOf(cleaned) === Object.prototype
+                && Object.keys(cleaned).length === 0) {
+                continue;
+            }
+            result[key] = cleaned;
+        }
+        return result;
+    }
+    return obj;
+}
+
 export function getChanges<T extends object>(source: Partial<T>, comparison: Partial<T>): Partial<T> {
     const changes: Partial<T> = {};
 
@@ -251,7 +280,7 @@ export function EntityForm<M extends Record<string, any>>({
     const context = useFireCMSContext();
     const analyticsController = useAnalyticsController();
 
-    const [underlyingChanges] = useState<Partial<EntityValues<M>>>({});
+    const [underlyingChanges, setUnderlyingChanges] = useState<Partial<EntityValues<M>>>({});
 
     const [customIdLoading, setCustomIdLoading] = useState<boolean>(false);
 
@@ -332,7 +361,15 @@ export function EntityForm<M extends Record<string, any>>({
         return [initialValues, initialDirty];
     }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
 
-    const hasLocalChanges = !localChangesCleared && localChangesDataRaw && Object.keys(localChangesDataRaw).length > 0;
+    const hasLocalChanges = useMemo(() => {
+        if (localChangesCleared || !localChangesDataRaw || Object.keys(localChangesDataRaw).length === 0) {
+            return false;
+        }
+        // Compare cached values against entity values to check for real differences
+        const entityValues = entity?.values ?? {};
+        const realChanges = getChanges(localChangesDataRaw as Partial<M>, entityValues as Partial<M>);
+        return Object.keys(realChanges).length > 0;
+    }, [localChangesCleared, localChangesDataRaw, entity?.values]);
 
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
         initialValues: initialValues as M,
@@ -352,8 +389,10 @@ export function EntityForm<M extends Record<string, any>>({
         onValuesChangeDeferred: (values: M, controller: FormexController<M>) => {
             const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
             if (controller.dirty) {
-                const touchedValues = extractTouchedValues(values, controller.touched);
-                saveEntityToCache(key, touchedValues);
+                const touchedValues = removeEmptyContainers(extractTouchedValues(values, controller.touched));
+                if (touchedValues && Object.keys(touchedValues).length > 0) {
+                    saveEntityToCache(key, touchedValues);
+                }
             }
         },
         validation: (values) => {
@@ -666,6 +705,27 @@ export function EntityForm<M extends Record<string, any>>({
 
     useOnAutoSave(autoSave, formex, lastSavedValues, save);
 
+    // Detect external changes to the entity (e.g. from onSnapshot after Admin SDK writes)
+    const prevEntityValuesRef = useRef<EntityValues<M> | undefined>(entity?.values);
+    useEffect(() => {
+        if (!entity?.values || status !== "existing") return;
+        const prev = prevEntityValuesRef.current;
+        prevEntityValuesRef.current = entity.values;
+        if (prev && !equal(prev, entity.values)) {
+            // Compute the diff between the old and new entity values
+            const changes: Partial<EntityValues<M>> = {};
+            const allKeys = new Set([...Object.keys(prev), ...Object.keys(entity.values)]);
+            for (const key of allKeys) {
+                if (!equal((prev as any)[key], (entity.values as any)[key])) {
+                    (changes as any)[key] = (entity.values as any)[key];
+                }
+            }
+            if (Object.keys(changes).length > 0) {
+                setUnderlyingChanges(changes);
+            }
+        }
+    }, [entity?.values, status]);
+
     useEffect(() => {
         if (!autoSave && !formex.isSubmitting && underlyingChanges && entity) {
             // we update the form fields from the Firestore data

package/src/form/PropertyFieldBinding.tsx

@@ -20,7 +20,7 @@ import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "../uti
 import { useAuthController, useCustomizationController, useTranslation } from "../hooks";
 import { Typography } from "@firecms/ui";
 import { getFieldConfig, getFieldId } from "../core";
-import { ErrorBoundary } from "../components";
+import { ErrorBoundary, CircularProgressCenter } from "../components";
 
 /**
  * This component renders a form field creating the corresponding configuration
@@ -287,8 +287,9 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
 
     return (
         <ErrorBoundary>
-
-            <UsedComponent {...cmsFieldProps} />
+            <React.Suspense fallback={<CircularProgressCenter />}>
+                <UsedComponent {...cmsFieldProps} />
+            </React.Suspense>
 
             {underlyingValueHasChanged && !isSubmitting &&
                 <Typography variant={"caption"} className={"ml-3.5"}>

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel, Typography } from "@firecms/ui";
+import { ExpandablePanel, IconButton, CloseIcon } from "@firecms/ui";
 import { getArrayResolvedProperties, getIconForProperty, isReadOnly } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useAuthController } from "../../hooks";
@@ -50,15 +50,28 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
         setValue
     });
 
-    const title = (<>
+    const title = (<div className="flex items-center w-full">
         <LabelWithIconAndTooltip
             propertyKey={propertyKey}
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"h-8 flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
-        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
-    </>);
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <span className={"text-sm text-text-secondary dark:text-text-secondary-dark ml-1"}>({value.length})</span>}
+        <div className="flex-grow"/>
+        {(property.nullable || property.clearable) && !disabled && (
+            <IconButton
+                size="small"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setValue(null);
+                }}
+            >
+                <CloseIcon size={"small"}/>
+            </IconButton>
+        )}
+    </div>);
 
     const body = resolvedProperties.map((childProperty, index) => {
         const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -5,7 +5,7 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 import { useNavigationController, useReferenceDialog, useTranslation } from "../../hooks";
-import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
+import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography, IconButton, CloseIcon } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
@@ -100,15 +100,28 @@ export function ArrayOfReferencesFieldBinding({
         );
     }, [ofProperty.path, ofProperty.previewProperties, value]);
 
-    const title = (<>
+    const title = (<div className="flex items-center w-full">
         <LabelWithIconAndTooltip
             propertyKey={propertyKey}
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
-        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
-    </>);
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <span className={"text-sm text-text-secondary dark:text-text-secondary-dark ml-1"}>({value.length})</span>}
+        <div className="flex-grow"/>
+        {(property.nullable || property.clearable) && !disabled && (
+            <IconButton
+                size="small"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setValue(null);
+                }}
+            >
+                <CloseIcon size={"small"}/>
+            </IconButton>
+        )}
+    </div>);
 
     const body = <>
         {!collection && <ErrorView

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -8,7 +8,7 @@ import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
 import { getDefaultValueFor, getIconForProperty, mergeDeep, } from "../../util";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
-import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
+import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography, IconButton, CloseIcon } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { ArrayContainer, ArrayEntryParams } from "../../components";
 import { useTranslation } from "../../hooks/useTranslation";
@@ -74,12 +74,26 @@ export function BlockFieldBinding<T extends Array<any>>({
     };
 
     const title = (
-        <LabelWithIconAndTooltip
-            propertyKey={propertyKey}
-            icon={getIconForProperty(property, "small")}
-            required={property.validation?.required}
-            title={property.name}
-            className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        <div className="flex items-center w-full">
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark flex-grow"}/>
+            {(property.nullable || property.clearable) && !disabled && (
+                <IconButton
+                    size="small"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setValue(null);
+                    }}
+                >
+                    <CloseIcon size={"small"}/>
+                </IconButton>
+            )}
+        </div>
     );
 
     const firstOneOfKey = Object.keys(property.oneOf.properties)[0];

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -48,7 +48,7 @@ export function DateTimeFieldBinding({
                     onChange={(dateValue) => setValue(dateValue)}
                     size={"large"}
                     mode={property.mode}
-                    clearable={property.clearable}
+                    clearable={property.nullable || property.clearable}
                     locale={locale}
                     timezone={property.timezone}
                     error={showError}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -13,6 +13,7 @@ import {
     defaultBorderMixin,
     ExpandablePanel,
     IconButton,
+    CloseIcon,
     Menu,
     MenuItem,
     RemoveIcon,
@@ -64,12 +65,28 @@ export function KeyValueFieldBinding({
                                      initialValue={initialValues}
                                      fieldName={property.name ?? propertyKey}/>;
 
-    const title = <LabelWithIconAndTooltip
-        propertyKey={propertyKey}
-        icon={getIconForProperty(property, "small")}
-        required={property.validation?.required}
-        title={property.name}
-        className={"text-text-secondary dark:text-text-secondary-dark"}/>;
+    const title = (
+        <div className="flex items-center w-full">
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark flex-grow"}/>
+            {(property.nullable || property.clearable) && !disabled && (
+                <IconButton
+                    size="small"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setValue(null);
+                    }}
+                >
+                    <CloseIcon size={"small"}/>
+                </IconButton>
+            )}
+        </div>
+    );
 
     return (
         <>

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -6,7 +6,7 @@ import { getIconForProperty, isHidden, isReadOnly, pick } from "../../util";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { FormEntry } from "../components/FormEntry";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
+import { cls, ExpandablePanel, InputLabel, Select, SelectItem, IconButton, CloseIcon } from "@firecms/ui";
 import { useTranslation } from "../../hooks";
 
 /**
@@ -28,7 +28,8 @@ export function MapFieldBinding({
     includeDescription,
     autoFocus,
     context,
-    onPropertyChange
+    onPropertyChange,
+    setValue
 }: FieldProps<Record<string, any>>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
@@ -108,12 +109,26 @@ export function MapFieldBinding({
                 }}
                 className={property.widthPercentage !== undefined ? "mt-8" : undefined}
                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
-                title={<LabelWithIconAndTooltip
-                    propertyKey={propertyKey}
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    title={property.name}
-                    className={"text-text-secondary dark:text-text-secondary-dark"} />}>
+                title={<div className="flex items-center w-full">
+                    <LabelWithIconAndTooltip
+                        propertyKey={propertyKey}
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}
+                        className={"text-text-secondary dark:text-text-secondary-dark flex-grow"} />
+                    {(property.nullable || property.clearable) && !disabled && (
+                        <IconButton
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setValue(null);
+                            }}
+                        >
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    )}
+                </div>}>
                 {mapFormView}
             </ExpandablePanel>}
 

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -11,10 +11,14 @@ import {
     useAuthController,
     useStorageSource
 } from "../../index";
-import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
-import { FireCMSEditor, FireCMSEditorProps } from "../../editor";
+import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, IconButton, CloseIcon } from "@firecms/ui";
+import type { FireCMSEditorProps } from "../../editor";
 import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
 import { isImageFile, resizeImage } from "../../util/useStorageUploadController";
+import { lazyEager } from "../../util/lazy_eager";
+import { CircularProgressCenter } from "../../components/CircularProgressCenter";
+
+const FireCMSEditor = lazyEager<typeof import("../../editor/editor")["FireCMSEditor"]>(() => import("../../editor/editor"), "FireCMSEditor");
 
 interface MarkdownEditorFieldProps {
     highlight?: { from: number, to: number };
@@ -51,7 +55,7 @@ export function MarkdownEditorFieldBinding({
     const internalValue = useRef<string | null>(value);
 
     const onContentChange = useCallback((content: string) => {
-        if (content === value || (value === null && content === "")) {
+        if (content === value || ((value === null || value === undefined) && content === "")) {
             return;
         }
         internalValue.current = content;
@@ -135,17 +139,21 @@ export function MarkdownEditorFieldBinding({
         return url;
     };
 
-    const editor = <FireCMSEditor
-        key={context.formex.version + fieldVersion}
-        content={value}
-        onMarkdownContentChange={onContentChange}
-        version={context.formex.version + fieldVersion}
-        highlight={highlight}
-        disabled={disabled}
-        markdownConfig={markdownConfig}
-        handleImageUpload={handleImageUpload}
-        {...editorProps}
-    />;
+    const editor = (
+        <React.Suspense fallback={<CircularProgressCenter />}>
+            <FireCMSEditor
+                key={context.formex.version + fieldVersion}
+                content={value}
+                onMarkdownContentChange={onContentChange}
+                version={context.formex.version + fieldVersion}
+                highlight={highlight}
+                disabled={disabled}
+                markdownConfig={markdownConfig}
+                handleImageUpload={handleImageUpload}
+                {...editorProps}
+            />
+        </React.Suspense>
+    );
 
     if (minimalistView)
         return (
@@ -156,12 +164,27 @@ export function MarkdownEditorFieldBinding({
 
     return (
         <>
-            <LabelWithIconAndTooltip
-                propertyKey={propertyKey}
-                icon={getIconForProperty(property, "small")}
-                required={property.validation?.required}
-                title={property.name}
-                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />
+            <div className="flex items-center w-full">
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"} />
+                <div className="flex-grow"/>
+                {(property.nullable || property.clearable) && !disabled && (
+                    <IconButton
+                        size="small"
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            setValue(null);
+                        }}
+                    >
+                        <CloseIcon size={"small"}/>
+                    </IconButton>
+                )}
+            </div>
             <div
                 className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
                 {editor}

package/src/form/field_bindings/MultiSelectFieldBinding.tsx

@@ -4,7 +4,7 @@ import { EnumType, FieldProps, ResolvedProperty } from "../../types";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { enumToObjectEntries, getIconForProperty, getLabelOrConfigFrom } from "../../util";
-import { CloseIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
+import { CloseIcon, MultiSelect, MultiSelectItem, IconButton } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
@@ -93,6 +93,20 @@ export function MultiSelectFieldBinding({
                     required={property.validation?.required}
                     title={property.name}
                     className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                endAdornment={
+                    (property.nullable || property.clearable) && !disabled && value !== null && value !== undefined ? (
+                        <IconButton
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setValue(null);
+                            }}
+                        >
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    ) : undefined
+                }
                 onValueChange={(updatedValue: string[]) => {
                     let newValue: EnumType[] | null;
                     if (of && (of as ResolvedProperty)?.dataType === "number") {

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -8,7 +8,7 @@ import { ReferencePreview } from "../../preview";
 import { getIconForProperty, IconForView } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { EntityPreviewContainer } from "../../components/EntityPreview";
-import { cls } from "@firecms/ui";
+import { cls, IconButton, CloseIcon } from "@firecms/ui";
 
 /**
  * Field that opens a reference selection dialog and stores the entity ID as a string.
@@ -98,16 +98,30 @@ function ReferenceAsStringFieldBindingInternal({
 
             {collection && <>
 
-                {referenceValue && <ReferencePreview
-                    disabled={!path}
-                    previewProperties={property.reference?.previewProperties}
-                    hover={!disabled}
-                    size={size}
-                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
-                    reference={referenceValue}
-                    includeEntityLink={property.reference?.includeEntityLink}
-                    includeId={property.reference?.includeId}
-                />}
+                {referenceValue && <div className="flex items-center gap-2">
+                    <ReferencePreview
+                        disabled={!path}
+                        previewProperties={property.reference?.previewProperties}
+                        hover={!disabled}
+                        size={size}
+                        onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                        reference={referenceValue}
+                        includeEntityLink={property.reference?.includeEntityLink}
+                        includeId={property.reference?.includeId}
+                    />
+                    {(property.nullable || property.clearable) && !disabled && (
+                        <IconButton
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setValue(null);
+                            }}
+                        >
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    )}
+                </div>}
 
                 {!value && <div className="justify-center text-left">
                     <EntityPreviewContainer

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -9,7 +9,7 @@ import { EmptyValue, ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom, IconForView } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { EntityPreviewContainer } from "../../components/EntityPreview";
-import { cls } from "@firecms/ui";
+import { cls, IconButton, CloseIcon } from "@firecms/ui";
 
 /**
  * Field that opens a reference selection dialog.
@@ -97,16 +97,30 @@ function ReferenceFieldBindingInternal({
 
             {collection && <>
 
-                {value && <ReferencePreview
-                    disabled={!property.path}
-                    previewProperties={property.previewProperties}
-                    hover={!disabled}
-                    size={size}
-                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
-                    reference={value}
-                    includeEntityLink={property.includeEntityLink}
-                    includeId={property.includeId}
-                />}
+                {value && <div className="flex items-center gap-2">
+                    <ReferencePreview
+                        disabled={!property.path}
+                        previewProperties={property.previewProperties}
+                        hover={!disabled}
+                        size={size}
+                        onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                        reference={value}
+                        includeEntityLink={property.includeEntityLink}
+                        includeId={property.includeId}
+                    />
+                    {(property.nullable || property.clearable) && !disabled && (
+                        <IconButton
+                            size="small"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                setValue(null);
+                            }}
+                        >
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    )}
+                </div>}
 
                 {!value && <div className="justify-center text-left">
                     <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -4,7 +4,7 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ArrayContainer, ArrayEntryParams, ErrorBoundary } from "../../components";
 import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty, mergeDeep } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel, Typography } from "@firecms/ui";
+import { ExpandablePanel, Typography, IconButton, CloseIcon } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useAuthController } from "../../hooks";
 import { useTranslation } from "../../hooks/useTranslation";
@@ -101,15 +101,28 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                            className={property.widthPercentage !== undefined ? "mt-8" : undefined}
     />;
 
-    const title = (<>
+    const title = (<div className="flex items-center w-full">
         <LabelWithIconAndTooltip
             propertyKey={propertyKey}
             icon={getIconForProperty(property, "small")}
             required={property.validation?.required}
             title={property.name}
-            className={"h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
-        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
-    </>);
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <span className={"text-sm text-text-secondary dark:text-text-secondary-dark ml-1"}>({value.length})</span>}
+        <div className="flex-grow"/>
+        {(property.nullable || property.clearable) && !disabled && (
+            <IconButton
+                size="small"
+                onClick={(e) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    setValue(null);
+                }}
+            >
+                <CloseIcon size={"small"}/>
+            </IconButton>
+        )}
+    </div>);
 
     return (
 

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -66,11 +66,13 @@ export function SelectFieldBinding<T extends EnumType>({
                         />
                     </PropertyIdCopyTooltip>}
                 endAdornment={
-                    property.clearable && !disabled && <IconButton
-                        size="small"
-                        onClick={handleClearClick}>
-                        <CloseIcon size={"small"}/>
-                    </IconButton>
+                    (property.nullable || property.clearable) && !disabled && value !== null && value !== undefined ? (
+                        <IconButton
+                            size="small"
+                            onClick={handleClearClick}>
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                    ) : undefined
                 }
                 onValueChange={(updatedValue: string) => {
                     const newValue = updatedValue