@firecms/core 3.4.0-canary.f6a889a → 3.5.0

package/src/components/EntityCollectionView/useBoardDataController.tsx

@@ -45,6 +45,8 @@ export interface BoardDataController<M extends Record<string, any> = any, COLUMN
 export interface UseBoardDataControllerProps<M extends Record<string, any> = any> {
     /** Full path to the collection */
     fullPath: string;
+    /** `fullPath` split at its real segment boundaries; forwarded to the datasource. */
+    pathSegments?: string[];
     /** The entity collection configuration */
     collection: EntityCollection<M>;
     /** Property key used for column assignment */
@@ -67,6 +69,7 @@ export interface UseBoardDataControllerProps<M extends Record<string, any> = any
  */
 export function useBoardDataController<M extends Record<string, any> = any, COLUMN extends string = string>({
     fullPath,
+    pathSegments,
     collection,
     columnProperty,
     columns,
@@ -79,7 +82,12 @@ export function useBoardDataController<M extends Record<string, any> = any, COLU
     const context = useFireCMSContext();
     const dataSource = useDataSource(collection);
     const navigation = useNavigationController();
-    const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath), [fullPath, navigation.resolveIdsFrom]);
+    // Resolved together so the two representations always describe the same chain.
+    // Segments are resolved, never derived (see useEntityFetch).
+    const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath, pathSegments), [fullPath, pathSegments, navigation.resolveIdsFrom]);
+    const resolvedPathSegments = useMemo(() => pathSegments
+        ? (navigation.resolveSegmentsFrom?.(pathSegments) ?? pathSegments)
+        : undefined, [pathSegments, navigation.resolveSegmentsFrom]);
 
     // Stable refs for objects that shouldn't trigger re-subscriptions
     const dataSourceRef = useRef(dataSource);
@@ -95,11 +103,13 @@ export function useBoardDataController<M extends Record<string, any> = any, COLU
     const orderPropertyRef = useRef(orderProperty);
     const searchStringRef = useRef(searchString);
     const resolvedPathRef = useRef(resolvedPath);
+    const resolvedPathSegmentsRef = useRef(resolvedPathSegments);
     filterValuesRef.current = filterValues;
     columnPropertyRef.current = columnProperty;
     orderPropertyRef.current = orderProperty;
     searchStringRef.current = searchString;
     resolvedPathRef.current = resolvedPath;
+    resolvedPathSegmentsRef.current = resolvedPathSegments;
 
     // Track item count per column for pagination
     const [columnItemCounts, setColumnItemCounts] = useState<Record<string, number>>(() => {
@@ -168,6 +178,7 @@ export function useBoardDataController<M extends Record<string, any> = any, COLU
         const currentOrderProperty = orderPropertyRef.current;
         const currentSearchString = searchStringRef.current;
         const currentResolvedPath = resolvedPathRef.current;
+        const currentPathSegments = resolvedPathSegmentsRef.current;
 
         // Build filter for this column
         const columnFilter: FilterValues<string> = {
@@ -205,6 +216,7 @@ export function useBoardDataController<M extends Record<string, any> = any, COLU
                             currentCollection.callbacks!.onFetch!({
                                 collection: currentCollection,
                                 path: currentResolvedPath,
+                                pathSegments: currentPathSegments,
                                 entity,
                                 context: currentContext
                             })
@@ -248,6 +260,7 @@ export function useBoardDataController<M extends Record<string, any> = any, COLU
         if (currentDataSource.listenCollection) {
             const unsubscribe = currentDataSource.listenCollection<M>({
                 path: currentResolvedPath,
+                pathSegments: currentPathSegments,
                 collection: currentCollection,
                 onUpdate,
                 onError,
@@ -262,6 +275,7 @@ export function useBoardDataController<M extends Record<string, any> = any, COLU
         } else {
             currentDataSource.fetchCollection<M>({
                 path: currentResolvedPath,
+                pathSegments: currentPathSegments,
                 collection: currentCollection,
                 searchString: currentSearchString,
                 filter: columnFilter,
@@ -297,6 +311,7 @@ export function useBoardDataController<M extends Record<string, any> = any, COLU
         const currentColumnProperty = columnPropertyRef.current;
         const currentSearchString = searchStringRef.current;
         const currentResolvedPath = resolvedPathRef.current;
+        const currentPathSegments = resolvedPathSegmentsRef.current;
         const currentColumns = columns;
         const currentColumnItemCounts = columnItemCounts;
 
@@ -316,6 +331,7 @@ export function useBoardDataController<M extends Record<string, any> = any, COLU
                     };
                     currentDataSource.countEntities({
                         path: currentResolvedPath,
+                        pathSegments: currentPathSegments,
                         collection: currentCollection,
                         filter: columnFilter,
                         searchString: currentSearchString

package/src/components/EntityCollectionView/utils.ts

@@ -1,3 +1,5 @@
+import { getLocalStorageJSON, setLocalStorageItem } from "../../util/local_storage";
+
 export function addRecentId(collectionId: string, id: string) {
     const recentIds = getRecentIds(collectionId);
     const newRecentIds = [id, ...recentIds.filter(i => i !== id)];
@@ -9,11 +11,9 @@ export function addRecentId(collectionId: string, id: string) {
 }
 
 export function saveSearchedIdsLocally(collectionId: string, ids: string[]) {
-    localStorage.setItem("recent_id_searches::" + collectionId, JSON.stringify(ids));
+    setLocalStorageItem("recent_id_searches::" + collectionId, JSON.stringify(ids));
 }
 
 export function getRecentIds(collectionId: string): string[] {
-    const stored = localStorage.getItem("recent_id_searches::" + collectionId);
-    if (!stored) return [];
-    return JSON.parse(stored);
+    return getLocalStorageJSON("recent_id_searches::" + collectionId, []);
 }

package/src/components/EntityPreview.tsx

@@ -63,7 +63,7 @@ export function EntityPreview({
 
     const navigationController = useNavigationController();
 
-    const collection = collectionProp ?? navigationController.getCollection(entity.path);
+    const collection = collectionProp ?? navigationController.getCollection(entity.path, false, entity.pathSegments);
 
     if (!collection) {
         throw Error(`Couldn't find the corresponding collection view for the path: ${entity.path}`);
@@ -177,6 +177,9 @@ export function EntityPreview({
                         sideEntityController.open({
                             entityId: entity.id,
                             path: entity.path,
+                            // Paired with `entity.path` above; undefined if the entity was
+                            // loaded without them.
+                            pathSegments: entity.pathSegments,
                             collection,
                             updateUrl: true
                         });

package/src/components/ErrorBoundary.tsx

@@ -4,17 +4,16 @@ import { useTranslation } from "../hooks/useTranslation";
 import { ErrorIcon, Typography } from "@firecms/ui";
 
 export class ErrorBoundary extends React.Component<PropsWithChildren<Record<string, unknown>>, {
-    hasError: boolean,
-    error?: Error
+    error: Error | null
 }> {
     constructor(props: any) {
         super(props);
-        this.state = { hasError: false };
+        this.state = { error: null };
     }
 
     // eslint-disable-next-line n/handle-callback-err
     static getDerivedStateFromError(error: Error) {
-        return { hasError: true, error };
+        return { error };
     }
 
     componentDidCatch(error: Error, errorInfo: ErrorInfo) {
@@ -23,9 +22,8 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<Record<stri
     }
 
     render() {
-        if (this.state.hasError) {
-            // You can render any custom fallback UI
-            return <FallbackView message={this.state.error?.message}/>;
+        if (this.state.error) {
+            return <FallbackView message={this.state.error.message}/>;
         }
 
         return this.props.children;
@@ -35,18 +33,14 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<Record<stri
 function FallbackView({ message }: { message?: string }) {
     const { t } = useTranslation();
     return (
-        <div className="h-full w-full bg-slate-100 dark:bg-surface-900 flex items-center justify-center p-4">
-            <div
-                className="flex flex-col items-center justify-center m-4 bg-white dark:bg-surface-800 p-8 rounded-lg shadow-sm border border-gray-200 dark:border-surface-700">
-                <div className="flex items-center mb-4 text-red-500 dark:text-red-400">
-                    <ErrorIcon/>
-                    <div className="ml-4">{t("error")}</div>
-                </div>
-                <div className="flex justify-center text-gray-500 dark:text-gray-400">
-                    {/* Error message is purposely removed since it's hard to access state here, but typical ErrorBoundary fallback doesn't always show the raw message */}
-                    {t("see_console_details")}
-                </div>
+        <div className="flex flex-col m-2">
+            <div className="flex items-center m-2">
+                <ErrorIcon color={"error"} size={"small"}/>
+                <div className="ml-4">{t("error")}</div>
             </div>
+            <Typography variant={"caption"}>
+                {message ?? t("see_console_details")}
+            </Typography>
         </div>
     );
 }

package/src/components/LicenseBanner.tsx

@@ -0,0 +1,287 @@
+import React, { useContext, useState } from "react";
+import { Alert, Button, CloseIcon, IconButton } from "@firecms/ui";
+import { AccessResponse, ProSuggestion } from "../types";
+import { getLicenseSubscribeUrl, PRO_PLUGIN_KEYS } from "../core/pro_plugins";
+import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
+import { useLicenseStatus } from "../hooks/useLicenseStatus";
+import { useTranslation } from "../hooks/useTranslation";
+
+const DISMISSED_STORAGE_KEY = "firecms_license_banner_dismissed";
+const DISMISSED_SUGGESTIONS_STORAGE_KEY = "firecms_pro_suggestions_dismissed";
+const DAY_MS = 24 * 60 * 60 * 1000;
+
+/**
+ * @group Components
+ */
+export interface LicenseBannerProps {
+    /**
+     * Applied to the banner's outer element when there is something to show.
+     */
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+type BannerContent = {
+    state: string;
+    color: "info" | "warning";
+    message: string;
+    linkLabel: string;
+    href: string;
+    /**
+     * `session` hides it until the browser session ends, `forever` in this
+     * browser for good.
+     */
+    dismissal: "none" | "session" | "forever";
+};
+
+/**
+ * Where each PRO suggestion links: the plugin's docs, which say how to add it.
+ * The UTM parameters let the website count the clicks.
+ */
+const SUGGESTION_DOCS_URLS: Record<ProSuggestion["plugin"], string> = {
+    user_management: "https://firecms.co/docs/pro/user_management/?utm_source=firecms&utm_medium=cms_suggestion&utm_campaign=user_management",
+    entity_history: "https://firecms.co/docs/pro/entity_history/?utm_source=firecms&utm_medium=cms_suggestion&utm_campaign=entity_history"
+};
+
+/**
+ * Tells the user where their FireCMS PRO license stands: days left in the
+ * trial, or why PRO is paused (the trial ended, the key is not linked to this
+ * project, or the license pays for other projects). Renders nothing when
+ * licensed and while the status is unknown. When no license is needed, it
+ * shows only a PRO plugin the license check suggests for this project, if any.
+ *
+ * The default `Scaffold` already renders it above the main content. Place it
+ * yourself only in a custom layout.
+ *
+ * @group Components
+ */
+export function LicenseBanner({
+                                  className,
+                                  style
+                              }: LicenseBannerProps) {
+
+    const licenseStatus = useLicenseStatus();
+    const { t, i18n } = useTranslation();
+
+    // The server answers `not_required` to every localhost and FireCMS Cloud
+    // request, whatever the app mounts, so a suggestion is only shown to an
+    // app that really runs no PRO plugin.
+    const plugins = useContext(CustomizationControllerContext)?.plugins;
+    const runsProPlugin = plugins?.some(plugin => PRO_PLUGIN_KEYS.includes(plugin.key)) ?? false;
+
+    // States dismissed in this browser session; a different state shows again.
+    const [dismissed, setDismissed] = useState<string[]>(() => readDismissed(sessionDismissals));
+    // Suggestions dismissed in this browser, for good.
+    const [dismissedForGood, setDismissedForGood] = useState<string[]>(() => readDismissed(browserDismissals));
+
+    // `language`, not `resolvedLanguage`: locale bundles are added after init,
+    // and `resolvedLanguage` stays on the English fallback when they are.
+    const content = licenseStatus
+        ? buildBannerContent(licenseStatus, t, i18n?.language, runsProPlugin)
+        : null;
+
+    if (!content
+        || (content.dismissal === "session" && dismissed.includes(content.state))
+        || (content.dismissal === "forever" && dismissedForGood.includes(content.state)))
+        return null;
+
+    const dismiss = () => {
+        if (content.dismissal === "forever") {
+            const next = [...dismissedForGood, content.state];
+            writeDismissed(browserDismissals, next);
+            setDismissedForGood(next);
+        } else {
+            const next = [...dismissed, content.state];
+            writeDismissed(sessionDismissals, next);
+            setDismissed(next);
+        }
+    };
+
+    return (
+        <div className={className} style={style}>
+            <Alert
+                color={content.color}
+                size={"small"}
+                className={"text-sm"}
+                action={<div className={"flex flex-row items-center gap-1 flex-shrink-0"}>
+                    <Button
+                        variant={"text"}
+                        size={"small"}
+                        component={"a"}
+                        href={content.href}
+                        target={"_blank"}
+                        rel={"noopener noreferrer"}>
+                        {content.linkLabel}
+                    </Button>
+                    {content.dismissal !== "none" && <IconButton
+                        size={"small"}
+                        aria-label={t("close")}
+                        onClick={dismiss}>
+                        <CloseIcon size={"small"}/>
+                    </IconButton>}
+                </div>}>
+                {content.message}
+            </Alert>
+        </div>
+    );
+}
+
+type Translate = ReturnType<typeof useTranslation>["t"];
+
+function buildBannerContent(status: AccessResponse,
+                            t: Translate,
+                            language: string | undefined,
+                            runsProPlugin: boolean): BannerContent | null {
+    const href = getLicenseSubscribeUrl(status);
+    switch (status.licenseState) {
+        case "trial": {
+            const days = trialDaysLeft(status);
+            if (days === null) return null;
+            return {
+                state: "trial",
+                color: "info",
+                message: t("license_trial_banner", {
+                    count: days,
+                    days: String(days)
+                }),
+                linkLabel: t("license_get_license"),
+                href,
+                dismissal: "session"
+            };
+        }
+        case "expired": {
+            const date = formatDate(status.trialEndsAt, language);
+            return {
+                state: "expired",
+                color: "warning",
+                message: date
+                    ? t("license_expired_banner", { date })
+                    : t("license_expired_banner_undated"),
+                linkLabel: t("license_get_license"),
+                href,
+                dismissal: "none"
+            };
+        }
+        case "invalid_project":
+            return {
+                state: "invalid_project",
+                color: "warning",
+                message: status.projectId
+                    ? t("license_invalid_project_banner", { projectId: status.projectId })
+                    : t("license_invalid_project_banner_unnamed"),
+                linkLabel: t("license_add_project_to_license"),
+                href,
+                dismissal: "none"
+            };
+        case "over_quota": {
+            const licensed = status.licensedProjects;
+            if (!isCount(licensed)) return null;
+            return {
+                state: "over_quota",
+                color: "warning",
+                message: t("license_over_quota_banner", {
+                    count: licensed,
+                    licensed: String(licensed)
+                }),
+                linkLabel: t("license_update_license"),
+                href,
+                dismissal: "none"
+            };
+        }
+        case "not_required":
+            return runsProPlugin ? null : buildSuggestionContent(status.suggestion, t);
+        default:
+            // licensed, whitelisted, and servers too old to say
+            return null;
+    }
+}
+
+function buildSuggestionContent(suggestion: ProSuggestion | undefined,
+                                t: Translate): BannerContent | null {
+    if (!suggestion || typeof suggestion !== "object") return null;
+    let message: string;
+    switch (suggestion.plugin) {
+        case "user_management": {
+            const users = suggestion.users;
+            // The copy is plural only: one person is not a reason to suggest roles.
+            message = isCount(users) && users >= 2
+                ? t("pro_suggestion_user_management", { users: String(Math.floor(users)) })
+                : t("pro_suggestion_user_management_uncounted");
+            break;
+        }
+        case "entity_history":
+            message = t("pro_suggestion_entity_history");
+            break;
+        default:
+            // A plugin this version has no copy for.
+            return null;
+    }
+    return {
+        state: `suggestion_${suggestion.plugin}`,
+        color: "info",
+        message,
+        linkLabel: t("pro_suggestion_learn_more"),
+        href: SUGGESTION_DOCS_URLS[suggestion.plugin],
+        dismissal: "forever"
+    };
+}
+
+function isCount(value: unknown): value is number {
+    return typeof value === "number" && Number.isFinite(value) && value >= 0;
+}
+
+function trialDaysLeft(status: AccessResponse): number | null {
+    if (isCount(status.daysLeft)) return Math.ceil(status.daysLeft);
+    const end = status.trialEndsAt ? new Date(status.trialEndsAt).getTime() : NaN;
+    if (Number.isNaN(end)) return null;
+    return Math.max(0, Math.ceil((end - Date.now()) / DAY_MS));
+}
+
+function formatDate(iso: string | undefined, language: string | undefined): string | null {
+    if (!iso) return null;
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) return null;
+    const options: Intl.DateTimeFormatOptions = {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+    };
+    try {
+        return new Intl.DateTimeFormat(language, options).format(date);
+    } catch {
+        return date.toLocaleDateString(undefined, options);
+    }
+}
+
+type DismissedStore = {
+    storage: () => Storage;
+    key: string;
+};
+
+const sessionDismissals: DismissedStore = {
+    storage: () => sessionStorage,
+    key: DISMISSED_STORAGE_KEY
+};
+
+const browserDismissals: DismissedStore = {
+    storage: () => localStorage,
+    key: DISMISSED_SUGGESTIONS_STORAGE_KEY
+};
+
+function readDismissed(store: DismissedStore): string[] {
+    try {
+        const value = store.storage().getItem(store.key);
+        const parsed = value ? JSON.parse(value) : [];
+        return Array.isArray(parsed) ? parsed.filter((s): s is string => typeof s === "string") : [];
+    } catch {
+        return [];
+    }
+}
+
+function writeDismissed(store: DismissedStore, states: string[]) {
+    try {
+        store.storage().setItem(store.key, JSON.stringify(states));
+    } catch {
+        // Private mode or storage disabled: dismissed for this page view only.
+    }
+}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -44,6 +44,15 @@ export interface ReferenceSelectionInnerProps<M extends Record<string, any>> {
      * dynamic. If not set, the dialog won't open.
      */
     path: string;
+    /**
+     * `path` split at its real segment boundaries, when the caller knows them.
+     *
+     * Left undefined by default and deliberately NOT derived from `path`: a reference
+     * path comes from a property's configuration, so there is no entity chain to recover
+     * the boundaries from. Splitting it would silently produce the wrong segments for a
+     * subcollection under a slash-bearing parent id, which is worse than not answering.
+     */
+    pathSegments?: string[];
 
     /**
      * If you are opening the dialog for the first time, you can select some
@@ -96,6 +105,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         multiselect,
         collection,
         path: pathInput,
+        pathSegments,
         selectedEntityIds: selectedEntityIdsProp,
         description,
         forceFilter,
@@ -110,7 +120,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
     const analyticsController = useAnalyticsController();
     const customizationController = useCustomizationController();
 
-    const fullPath = navigation.resolveIdsFrom(pathInput);
+    const fullPath = navigation.resolveIdsFrom(pathInput, pathSegments);
 
     const dataSource = useDataSource(collection);
 
@@ -153,6 +163,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                 selectedEntityIds.map((entityId) =>
                     dataSource.fetchEntity({
                         path: fullPath,
+                        pathSegments,
                         entityId,
                         collection
                     })))
@@ -204,6 +215,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         });
         sideEntityController.open({
             path: fullPath,
+            pathSegments,
             collection,
             updateUrl: true,
             onUpdate: ({ entity }) => {
@@ -277,6 +289,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         textSearchEnabled
     } =
         useTableSearchHelper({
+            pathSegments,
             collection,
             fullPath,
         });
@@ -315,6 +328,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         actions={<ReferenceDialogActions
                             collection={collection}
                             path={fullPath}
+                            pathSegments={pathSegments}
                             onNewClick={onNewClick}
                             onClear={onClear}/>
                         }
@@ -341,11 +355,14 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
 function ReferenceDialogActions({
                                     collection,
                                     path,
+                                    pathSegments,
                                     onClear,
                                     onNewClick
                                 }: {
     collection: EntityCollection<any>,
     path: string,
+    /** `path` split at its real segment boundaries, when known. Never derived from `path`. */
+    pathSegments?: string[],
     onClear: () => void,
     onNewClick: () => void
 }) {
@@ -360,7 +377,7 @@ function ReferenceDialogActions({
             onNewClick();
         }
         : undefined;
-    const addButton = canCreateEntity(collection, authController, path, null) &&
+    const addButton = canCreateEntity(collection, authController, path, null, pathSegments) &&
         onClick && (largeLayout
             ? <Button
                 onClick={onClick}

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -11,6 +11,7 @@ import {
     TextField
 } from "@firecms/ui";
 import { EnumValueConfig } from "../../../types";
+import { filterValueToText, parseFilterTextInput } from "./filter_text_input";
 
 interface StringNumberFilterFieldProps {
     name: string,
@@ -60,8 +61,15 @@ export function StringNumberFilterField({
     const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
     const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
     const [internalValue, setInternalValue] = useState<string | number | string[] | number[] | null | undefined>(fieldValue);
+    // Raw text of the text input, kept apart from `internalValue` so that intermediate
+    // inputs like "-", "0." or ".0" are not destroyed while the user is typing.
+    const [inputText, setInputText] = useState<string>(filterValueToText(fieldValue));
+    // Value the current `inputText` was built from, used to tell updates coming from
+    // outside apart from the ones triggered by the user typing.
+    const syncedValueRef = React.useRef(fieldValue);
 
     React.useEffect(() => {
+        const newValue = value ? value[1] : undefined;
         if (value) {
             const [op, val] = value;
             setOperation(op === "==" && val === null ? "is-null" : op);
@@ -70,15 +78,25 @@ export function StringNumberFilterField({
             setOperation(possibleOperations[0]);
             setInternalValue(undefined);
         }
+        // only reset the text when the value was changed somewhere else, so we don't
+        // interfere with what the user is currently typing
+        if (syncedValueRef.current !== newValue) {
+            syncedValueRef.current = newValue;
+            setInputText(filterValueToText(newValue));
+        }
     }, [value, possibleOperations[0]]);
 
     const isNullOperation = operation === "is-null";
 
-    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: string | number | string[] | number[] | null | undefined) {
+    // `keepInputText` is used when the update originates from the text input, where the
+    // text typed by the user is authoritative and must not be overwritten with `val`
+    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: string | number | string[] | number[] | null | undefined, keepInputText = false) {
         // Handle "is null" operation
         if (op === "is-null") {
             setOperation(op);
             setInternalValue(null);
+            syncedValueRef.current = null;
+            setInputText("");
             setValue(["==", null]);
             return;
         }
@@ -96,6 +114,9 @@ export function StringNumberFilterField({
 
         setOperation(op);
         setInternalValue(newValue);
+        syncedValueRef.current = newValue;
+        if (!keepInputText)
+            setInputText(filterValueToText(newValue));
 
         const hasNewValue = newValue !== null && Array.isArray(newValue)
             ? newValue.length > 0
@@ -111,6 +132,14 @@ export function StringNumberFilterField({
         }
     }
 
+    function updateFilterFromText(text: string) {
+        setInputText(text);
+        const { updateValue, value: parsedValue } = parseFilterTextInput(text, dataType);
+        // intermediate inputs like "-" or "0." keep the filter as it is
+        if (updateValue)
+            updateFilter(operation, parsedValue, true);
+    }
+
     const multiple = multipleSelectOperations.includes(operation);
 
     return (
@@ -138,16 +167,13 @@ export function StringNumberFilterField({
                 {!enumValues && <TextField
                     size={"medium"}
                     type={dataType === "number" ? "number" : undefined}
-                    value={internalValue !== undefined && internalValue != null ? String(internalValue) : ""}
+                    value={inputText}
                     disabled={isNullOperation}
                     placeholder={isNullOperation ? "null" : undefined}
                     onChange={(evt) => {
-                        const val = dataType === "number"
-                            ? parseFloat(evt.target.value)
-                            : evt.target.value;
-                        updateFilter(operation, val);
+                        updateFilterFromText(evt.target.value);
                     }}
-                    endAdornment={internalValue !== undefined && internalValue != null && <IconButton
+                    endAdornment={inputText !== "" && <IconButton
                         onClick={(e) => updateFilter(operation, undefined)}>
                         <CloseIcon />
                     </IconButton>}