@xh/hoist 86.0.0 → 86.1.0

package/build/types/svc/TraceService.d.ts

@@ -1,4 +1,4 @@
-import { HoistService, InitContext, Span, FullSpanConfig } from '@xh/hoist/core';
+import { HoistService, Span, FullSpanConfig } from '@xh/hoist/core';
 /**
  * Client-side distributed tracing service for Hoist applications.
  *
@@ -30,7 +30,7 @@ export declare class TraceService extends HoistService {
     private conf;
     /** Spans created before config available. */
     private _preConfigSpans;
-    initAsync(ctx: InitContext): Promise<void>;
+    initAsync(): Promise<void>;
     /** Is tracing currently enabled? */
     get enabled(): boolean;
     /**
@@ -64,12 +64,10 @@ export declare class TraceService extends HoistService {
      */
     private exportSpan;
     /**
-     * Push all pending spans to the server.
-     * Called on debounced interval and on page unload.
+     * Flush the queue of pending spans to the server.
+     * @internal - apps should generally allow this service to manage w/its internal debounce.
      */
     pushPendingAsync(): Promise<void>;
-    /** Bound the pending buffer, silently dropping oldest spans (failed pushes are logged). */
-    private enforceCap;
     /**
      * Called by {@link ConfigService} once `xhTraceConfig` has loaded. Applies sampling
      * decisions to all spans created during early startup and held in the pendingConfig
@@ -83,6 +81,10 @@ export declare class TraceService extends HoistService {
      */
     noteConfigAvailable(): void;
     private pushPendingBuffered;
+    /** Flush all pending spans to the server. */
+    private pushPendingInternalAsync;
+    /** Bound the pending buffer, silently dropping oldest spans (failed pushes are logged). */
+    private enforceCap;
     /**
      * Resolve a root-span sampling decision: a probabilistic decision from `sampleRules`. Rules
      * match on tag keys; the reserved key `name` matches the span's name (glob-capable, same

package/build/types/svc/TrackService.d.ts

@@ -1,4 +1,4 @@
-import { HoistService, InitContext, TrackOptions } from '@xh/hoist/core';
+import { HoistService, TrackOptions } from '@xh/hoist/core';
 /**
  * Primary service for tracking any activity that an application's admins want to track.
  * Activities are available for viewing/querying in the Admin Console's Client Activity tab.
@@ -9,14 +9,16 @@ export declare class TrackService extends HoistService {
     static instance: TrackService;
     private oncePerSessionSent;
     private pending;
-    initAsync(ctx: InitContext): Promise<void>;
+    initAsync(): Promise<void>;
     get conf(): ActivityTrackingConfig;
     get enabled(): boolean;
     /** Track User Activity. */
     track(options: TrackOptions | string): void;
     /**
      * Flush the queue of pending activity tracking messages to the server.
-     * @internal - apps should generally allow this service to manage w/its internal debounce.
+     *
+     * Not typically called by applications.  Called automatically by the framework via a
+     * debounce and when the page is hidden/terminated.
      */
     pushPendingAsync(): Promise<void>;
     private pushPendingBuffered;

package/build/types/svc/impl/Fetch.d.ts

@@ -0,0 +1,13 @@
+import { CallContextLike } from '@xh/hoist/core';
+import type { FetchOptions } from '../FetchService';
+/**
+ * Post a JSON body, using `fetch({keepalive: true})` when the page is no longer visible so the
+ * request can survive teardown (e.g. a flush as `XH.pageState` goes `hidden`/`frozen`/`terminated`).
+ *
+ * Keepalive bodies share a single browser-wide 64KB budget; if exceeded the request is never sent
+ * and we retry once uncapped (without keepalive), which still completes while the page is alive (the
+ * common `hidden` case). Real server errors are re-thrown, not re-posted.
+ *
+ * @internal
+ */
+export declare function terminationSafePostJson(opts: FetchOptions, ctx?: CallContextLike): Promise<any>;

package/build/types/utils/js/TestUtils.d.ts

@@ -1,4 +1,4 @@
-import { HoistProps } from '@xh/hoist/core';
+import type { HoistProps } from '@xh/hoist/core';
 /**
  * HTML attribute name used to tag elements with stable test identifiers. Use as a computed
  * property key on element specs - e.g. `{[TEST_ID]: 'my-grid'}` - to emit a `data-testid`

package/build/types/utils/react/LayoutPropUtils.d.ts

@@ -1,4 +1,4 @@
-import { ResolvedLayoutProps, PlainObject } from '@xh/hoist/core';
+import type { ResolvedLayoutProps, PlainObject } from '@xh/hoist/core';
 /**
  * These utils support accepting the CSS styles enumerated below as top-level props of a Component,
  * and are typically accessed via the `@LayoutSupport` mixin (for class-based components) or the

package/build/types/utils/react/ReactUtils.d.ts

@@ -1,4 +1,4 @@
-import { Content } from '@xh/hoist/core';
+import type { Content } from '@xh/hoist/core';
 import { ReactElement } from 'react';
 /**
  * Return the display name for either a class-based or functional Component.

package/cmp/error/ErrorMessage.scss

@@ -36,5 +36,7 @@
 }
 
 .xh-mobile .xh-error-message__inner {
+  flex: 1;
+  max-width: none;
   margin: 0 var(--xh-pad-px);
 }

package/cmp/grid/filter/GridFilterFieldSpec.ts

@@ -87,10 +87,13 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
         // Values from current column filter. `flatMap` here unwraps the array `parseVal` returns
         // for `tags`-typed fields, lining those values up with the scalar values produced by
         // `Store.getValuesForFieldFilter` above. Without this, a filter value like `'foo'` would
-        // survive as `['foo']` and dedupe incorrectly.
+        // survive as `['foo']` and dedupe incorrectly. The `filter` drops the non-selectable null
+        // value carried by a blank `tags` filter.
         const colFilterVals = flatMap(columnFilters, filter => {
             return castArray(filter.value).flatMap(val => sourceField.parseVal(val));
-        }).map(it => this.toDisplayValue(it));
+        })
+            .filter(it => sourceField.type !== 'tags' || it != null)
+            .map(it => this.toDisplayValue(it));
 
         // Combine + unique - these are all values that *could* be shown in the filter UI.
         const allValues = uniqBy([...allSrcVals, ...colFilterVals], this.getUniqueValue);

package/cmp/grid/impl/GridHScrollbar.ts

@@ -79,6 +79,10 @@ class GridHScrollbarModel extends HoistModel {
         return this.viewRef.current.querySelector('.ag-center-cols-viewport');
     }
 
+    private get agHeaderViewport(): HTMLDivElement {
+        return this.viewRef.current.querySelector('.ag-header-viewport');
+    }
+
     private get agVerticalScrollContainer(): HTMLDivElement {
         return this.viewRef.current.querySelector('.ag-body-vertical-scroll-container');
     }
@@ -102,6 +106,7 @@ class GridHScrollbarModel extends HoistModel {
 
     scrollViewport(left: number) {
         this.agViewport.scrollLeft = left;
+        this.agHeaderViewport.scrollLeft = left;
     }
 
     override afterLinked() {
@@ -110,9 +115,11 @@ class GridHScrollbarModel extends HoistModel {
             run: () => {
                 const {agViewport, viewRef} = this;
                 this.viewWidth = viewRef.current.clientWidth;
-                agViewport.addEventListener('scroll', e =>
-                    this.scrollScroller((e.target as HTMLDivElement).scrollLeft)
-                );
+                agViewport.addEventListener('scroll', e => {
+                    const left = (e.target as HTMLDivElement).scrollLeft;
+                    this.scrollScroller(left);
+                    this.agHeaderViewport.scrollLeft = left;
+                });
                 this.agViewportResizeObserver = observeResize(
                     () => this.onAgViewportResized(),
                     agViewport,

package/cmp/input/SegmentedControlOption.ts

@@ -0,0 +1,61 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2026 Extremely Heavy Industries Inc.
+ */
+import {Intent} from '@xh/hoist/core';
+import {LocalDate} from '@xh/hoist/utils/datetime';
+import {ReactElement} from 'react';
+
+/** Primitive value types supported as a SegmentedControl option value/label. */
+export type OptionPrimitive = string | number | boolean | LocalDate;
+
+/**
+ * Option for a SegmentedControl, shared by the desktop and mobile implementations.
+ */
+export interface SegmentedControlOption {
+    /** Value for this option. */
+    value: OptionPrimitive;
+
+    /** Display label. Defaults to `value.toString()` if omitted. */
+    label?: string;
+
+    /** Icon element, displayed before the label. */
+    icon?: ReactElement;
+
+    /** True to disable this individual option. */
+    disabled?: boolean;
+
+    /**
+     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
+     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
+     * `intent` default. Defaults to the control's `intent`.
+     */
+    intent?: Intent;
+}
+
+/**
+ * Variant of SegmentedControlOption for representing a null/"no value" selection.
+ * Label is required to force use case to override default js 'null' toString rendering.
+ */
+export interface SegmentedControlNullOption {
+    /** Null value for this option. */
+    value: null;
+
+    /** Display label - required for null options. */
+    label: string;
+
+    /** Icon element, displayed before the label. */
+    icon?: ReactElement;
+
+    /** True to disable this individual option. */
+    disabled?: boolean;
+
+    /**
+     * Visual intent for this option - rendered as a solid fill when selected and as a subtle
+     * text-color hint when not (e.g. to flag a destructive choice). Overrides any control-level
+     * `intent` default. Defaults to the control's `intent`.
+     */
+    intent?: Intent;
+}

package/cmp/input/index.ts

@@ -1,2 +1,3 @@
 export * from './HoistInputModel';
 export * from './HoistInputProps';
+export * from './SegmentedControlOption';

package/core/AppSpec.ts

@@ -7,7 +7,7 @@
 import {ElementFactory, HoistAppModel, HoistAuthModel, HoistProps, XH} from '@xh/hoist/core';
 import {throwIf} from '@xh/hoist/utils/js';
 import {isFunction, isNil, isString} from 'lodash';
-import {Component, ComponentClass, FunctionComponent} from 'react';
+import {Component, ComponentClass, FunctionComponent, ReactElement} from 'react';
 
 /**
  * Spec for a client-side Hoist application. A config matching this class's shape is provided
@@ -118,6 +118,12 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
     /** Optional message to show users when denied access to app. */
     lockoutMessage?: string;
 
+    /**
+     * Icon to display on the form-based login page, if active via `enableLoginForm: true`.
+     * Defaults to `Icon.shieldHalved()`.
+     */
+    loginPanelIcon?: ReactElement;
+
     /** Optional message to show on login form, if `showLoginForm: true`. */
     loginMessage?: string;
 
@@ -156,6 +162,7 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         lockoutMessage = null,
         lockoutPanel = null,
         loginMessage = null,
+        loginPanelIcon = null,
         modelClass,
         showBrowserContextMenu = false,
         trackAppLoad = true
@@ -191,6 +198,7 @@ export class AppSpec<T extends HoistAppModel = HoistAppModel> {
         this.lockoutMessage = lockoutMessage;
         this.lockoutPanel = lockoutPanel;
         this.loginMessage = loginMessage;
+        this.loginPanelIcon = loginPanelIcon;
         this.modelClass = modelClass;
         this.showBrowserContextMenu = showBrowserContextMenu;
         this.trackAppLoad = trackAppLoad;

package/core/HoistAuthModel.ts

@@ -66,8 +66,12 @@ export class HoistAuthModel extends HoistModel {
      * Process a manual login, submitted by user via form.
      * @returns identity of the user authenticated with the server; null if not yet authenticated.
      */
-    async loginWithCredentialsAsync(username: string, password: string): Promise<IdentityInfo> {
-        return this.runner()
+    async loginWithCredentialsAsync(
+        username: string,
+        password: string,
+        ctx?: CallContextLike
+    ): Promise<IdentityInfo> {
+        return this.runner(ctx)
             .span('login')
             .run(async ctx => {
                 const {success, identity} = await XH.fetchJson(
@@ -87,8 +91,8 @@ export class HoistAuthModel extends HoistModel {
      * The default implementation will call the 'logout' endpoint on the Grails server, clearing
      * any server-side session state there. Override to manage any client-side or third-party state.
      */
-    async logoutAsync(): Promise<void> {
-        await this.runner().span('logout').fetchJson({url: 'xh/logout'});
+    async logoutAsync(ctx?: CallContextLike): Promise<void> {
+        await this.runner(ctx).span('logout').fetchJson({url: 'xh/logout'});
     }
 
     /**
@@ -96,9 +100,12 @@ export class HoistAuthModel extends HoistModel {
      * whitelisted by Hoist to allow access prior to user authentication. For use in bootstrapping
      * client-side auth solutions that require configs such as OAuth endpoint URLs and client IDs.
      * See `BaseAuthenticationService.getClientConfig()` in hoist-core.
+     *
+     * @param ctx - tracing/load context. When called from within a `completeAuthAsync` override,
+     *      forward the supplied context so this fetch nests under the bootstrap trace.
      */
-    async loadConfigAsync(): Promise<PlainObject> {
-        return this.runner().span('config').fetchJson({url: 'xh/authConfig'});
+    async loadConfigAsync(ctx?: CallContextLike): Promise<PlainObject> {
+        return this.runner(ctx).span('config').fetchJson({url: 'xh/authConfig'});
     }
 
     /**

package/data/Field.ts

@@ -166,7 +166,9 @@ export function parseFieldValue(
         case 'date':
             return isLocalDate(val) ? val.date : isDate(val) ? val : new Date(val);
         case 'localDate':
-            return isLocalDate(val) ? val : LocalDate.get(val);
+            if (isLocalDate(val)) return val;
+            // `get` parses strict 'YYYYMMDD'/'YYYY-MM-DD' strings; `from` coerces Date/number/moment.
+            return isString(val) ? LocalDate.get(val) : LocalDate.from(val);
     }
 
     throw XH.exception(`Unknown field type '${type}'`);

package/data/filter/BaseFilterFieldSpec.ts

@@ -21,7 +21,12 @@ import {FieldFilterOperator} from './Types';
 export interface BaseFilterFieldSpecConfig {
     /** Identifying field name to filter on. */
     field: string;
-    /** Type of field, will default from related field on source if provided, or 'auto'. */
+    /**
+     * Type of field, will default from related field on source if provided, or 'auto'. A `date`
+     * (timestamp) source defaults to 'localDate' so filtering compares by calendar day (range and
+     * equality operators use full-day bounds). Set explicitly to 'date' to filter by exact
+     * timestamp instead.
+     */
     fieldType?: FieldType;
     /** DisplayName, will default from related field on source if provided */
     displayName?: string;
@@ -77,7 +82,11 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
         this.source = source;
 
         const sourceField = this.sourceField;
-        this.fieldType = fieldType ?? sourceField?.type ?? 'auto';
+        // Default a `date` (timestamp) source to `localDate` so filtering compares by calendar day
+        // rather than against midnight (#3338). Apps wanting exact-timestamp filtering can set
+        // `fieldType: 'date'` explicitly.
+        this.fieldType =
+            fieldType ?? (sourceField?.type === 'date' ? 'localDate' : sourceField?.type) ?? 'auto';
         this.displayName = displayName ?? sourceField?.displayName ?? genDisplayName(field);
         this.ops = this.parseOperators(ops);
         this.forceSelection = forceSelection ?? false;
@@ -183,7 +192,12 @@ export abstract class BaseFilterFieldSpec extends HoistBase {
             : ['>', '>=', '<', '<=', '=', '!='];
     }
 
+    private get isLocalDateFilteringTimestamp(): boolean {
+        return this.fieldType === 'localDate' && this.sourceField?.type === 'date';
+    }
+
     private get isEnumerableByDefault(): boolean {
+        if (this.isLocalDateFilteringTimestamp) return false;
         switch (this.fieldType) {
             case 'int':
             case 'number':

package/data/filter/FieldFilter.ts

@@ -14,6 +14,7 @@ import {
     escapeRegExp,
     first,
     isArray,
+    isEmpty,
     isEqual,
     isNil,
     isString,
@@ -112,9 +113,9 @@ export class FieldFilter extends Filter {
     // Overrides
     //-----------------
     override getTestFn(store?: Store): FilterTestFn {
-        let {field, op, value} = this,
-            regExps;
+        const {field, op, value} = this;
 
+        let storeFieldType: FieldType;
         if (store) {
             const storeField = store.getField(field);
             if (!storeField) {
@@ -127,29 +128,72 @@ export class FieldFilter extends Filter {
                 }
                 return () => true;
             }
+            storeFieldType = storeField.type;
+        }
+
+        const opFn = this.getOpFn(op, value, storeFieldType);
+
+        if (!store) return r => opFn(r[field]);
+
+        return (r: StoreRecord) => {
+            const val = r.get(field);
+            if (opFn(val)) return true;
+
+            // Maximize chances of matching. Always pass adds ...
+            if (r.isAdd) return true;
 
-            const fieldType = storeField.type === 'tags' ? 'string' : storeField.type;
+            // ... and check any differing original value as well
+            const committedVal = r.committedData[field];
+            return committedVal !== val && opFn(committedVal);
+        };
+    }
+
+    private getOpFn(
+        op: FieldFilterOperator,
+        value: any,
+        storeFieldType?: FieldType
+    ): (v: any) => boolean {
+        const RANGE_OPS = FieldFilter.RANGE_LIKE_OPERATORS,
+            ARR_OPS = FieldFilter.ARRAY_OPERATORS;
+
+        // Day-aware filtering for LocalDate value(s) over a timestamp field - compares against
+        // full calendar-day bounds for range and equality operators (#3338).
+        const firstVal = isArray(value) ? value[0] : value;
+        if (
+            storeFieldType === 'date' &&
+            LocalDate.isLocalDate(firstVal) &&
+            (RANGE_OPS.includes(op) || op === '=' || op === '!=')
+        ) {
+            return this.getDayBoundedOpFn(op, value);
+        }
+
+        // Coerce candidate value(s) to the store field's type when filtering against a store.
+        if (storeFieldType) {
+            const fieldType = storeFieldType === 'tags' ? 'string' : storeFieldType;
             value = isArray(value)
                 ? value.map(v => parseFieldValue(v, fieldType))
                 : parseFieldValue(value, fieldType);
         }
-
-        if (FieldFilter.ARRAY_OPERATORS.includes(op)) {
+        if (ARR_OPS.includes(op)) {
             value = castArray(value);
         }
 
-        let opFn: (v: any) => boolean;
+        // Treat null, empty string, and empty array (blank `tags`) alike as "blank".
+        const isBlank = (v: any) => isNil(v) || v === '' || (isArray(v) && isEmpty(v));
+
+        let regExps, opFn: (v: any) => boolean;
         switch (op) {
             case '=':
                 opFn = v => {
-                    if (isNil(v) || v === '') v = null;
-                    return value.some(it => isEqual(v, it));
+                    if (isBlank(v)) v = null;
+                    // A blank filter (empty `value`) matches only blank record values.
+                    return (v == null && isEmpty(value)) || value.some(it => isEqual(v, it));
                 };
                 break;
             case '!=':
                 opFn = v => {
-                    if (isNil(v) || v === '') v = null;
-                    return !value.some(it => isEqual(v, it));
+                    if (isBlank(v)) v = null;
+                    return (v != null || !isEmpty(value)) && !value.some(it => isEqual(v, it));
                 };
                 break;
             case '>':
@@ -197,20 +241,45 @@ export class FieldFilter extends Filter {
             default:
                 throw XH.exception(`Unknown operator: ${op}`);
         }
+        return opFn;
+    }
 
-        if (!store) return r => opFn(r[field]);
+    // Compare a timestamp against full calendar-day bounds `[dayStart, nextDayStart)` so a
+    // LocalDate value filters by date part. Supports range and equality operators (#3338).
+    private getDayBoundedOpFn(
+        op: FieldFilterOperator,
+        value: LocalDate | LocalDate[]
+    ): (v: any) => boolean {
+        const toMillis = (v: any) => (v instanceof Date ? v.getTime() : v);
 
-        return (r: StoreRecord) => {
-            const val = r.get(field);
-            if (opFn(val)) return true;
-
-            // Maximize chances of matching. Always pass adds ...
-            if (r.isAdd) return true;
+        // Equality ops test the date part against any of the candidate day(s).
+        if (op === '=' || op === '!=') {
+            const ranges = castArray(value).map(d => [
+                    d.date.getTime(),
+                    d.nextDay().date.getTime()
+                ]),
+                inAnyDay = (t: number) => ranges.some(([start, next]) => t >= start && t < next);
+            return op === '='
+                ? v => !isNil(v) && inAnyDay(toMillis(v))
+                : v => isNil(v) || !inAnyDay(toMillis(v));
+        }
 
-            // ... and check any differing original value as well
-            const committedVal = r.committedData[field];
-            return committedVal !== val && opFn(committedVal);
-        };
+        // Range ops compare against the bounds of a single day.
+        const day = value as LocalDate,
+            dayStart = day.date.getTime(),
+            nextDayStart = day.nextDay().date.getTime();
+        switch (op) {
+            case '>':
+                return v => !isNil(v) && toMillis(v) >= nextDayStart;
+            case '>=':
+                return v => !isNil(v) && toMillis(v) >= dayStart;
+            case '<':
+                return v => !isNil(v) && toMillis(v) < dayStart;
+            case '<=':
+                return v => !isNil(v) && toMillis(v) < nextDayStart;
+            default:
+                throw XH.exception(`Unsupported calendar-day operator: ${op}`);
+        }
     }
 
     override equals(other: Filter): boolean {

package/desktop/appcontainer/LoginPanel.ts

@@ -24,7 +24,7 @@ export const loginPanel = hoistCmp.factory({
     model: creates(LoginPanelModel),
 
     render({model}) {
-        const {loginMessage} = XH.appSpec,
+        const {loginMessage, loginPanelIcon} = XH.appSpec,
             {loadObserver, warning, isValid, loginInProgress} = model;
 
         const onKeyDown = ev => {
@@ -36,8 +36,8 @@ export const loginPanel = hoistCmp.factory({
             justifyContent: 'center',
             flexDirection: 'column',
             item: panel({
-                title: XH.clientAppName,
-                icon: Icon.login(),
+                title: `Login to ${XH.clientAppName}`,
+                icon: loginPanelIcon ?? Icon.shieldHalved({prefix: 'fas'}),
                 className: 'xh-login',
                 testId: 'xh-login',
                 width: 300,
@@ -47,6 +47,7 @@ export const loginPanel = hoistCmp.factory({
                     form(
                         textInput({
                             bind: 'username',
+                            leftIcon: Icon.user(),
                             placeholder: 'Username',
                             autoComplete: 'username',
                             autoFocus: true,
@@ -57,6 +58,7 @@ export const loginPanel = hoistCmp.factory({
                         }),
                         textInput({
                             bind: 'password',
+                            leftIcon: Icon.lock(),
                             placeholder: 'Password...',
                             autoComplete: 'current-password',
                             type: 'password',

package/desktop/cmp/filechooser/FileChooserModel.ts

@@ -96,7 +96,7 @@ export class FileChooserModel extends HoistModel {
     private readonly rejectToastMessage: (rejectedFiles: FileRejection[]) => ReactNode;
     private readonly rejectToastSpec: Partial<ToastSpec>;
 
-    constructor(config: FileChooserConfig) {
+    constructor(config: FileChooserConfig = {}) {
         super();
         makeObservable(this);
 

package/desktop/cmp/filter/FilterChooser.scss

@@ -93,11 +93,6 @@
 
 .xh-filter-chooser-favorite-icon {
   margin-left: var(--xh-pad-half-px);
-
-  // Matched to GroupingChooser equivalent.
-  &.svg-inline--fa {
-    width: 12px;
-  }
 }
 
 .xh-filter-chooser-favorite {

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilterModel.ts

@@ -98,10 +98,15 @@ export class HeaderFilterModel extends HoistModel {
 
     @computed
     get isCustomFilter() {
-        const {columnCompoundFilter, columnFilters} = this;
+        const {columnCompoundFilter, columnFilters, fieldType} = this;
         if (columnCompoundFilter) return true;
         if (isEmpty(columnFilters)) return false;
-        return columnFilters.some(it => !['=', '!=', 'includes'].includes(it.op));
+        return columnFilters.some(it => {
+            const isValuesTabOp = ['=', '!=', 'includes'].includes(it.op),
+                isTagsBlank =
+                    fieldType === 'tags' && ['=', '!='].includes(it.op) && it.value == null;
+            return !isValuesTabOp || isTagsBlank;
+        });
     }
 
     get commitOnChange() {
@@ -170,8 +175,8 @@ export class HeaderFilterModel extends HoistModel {
         if (close) {
             this.parent.close();
         } else {
-            // We must wait before resetting as GridFilterModel.setFilter() is async
-            wait().then(() => this.resetTabModels());
+            // Wait as setFilter is async.
+            wait().then(() => this.syncWithFilter());
         }
     }
 

package/desktop/cmp/grid/impl/filter/headerfilter/custom/CustomRowModel.ts

@@ -8,7 +8,7 @@ import {HoistModel} from '@xh/hoist/core';
 import {FieldFilterOperator, FieldFilterSpec} from '@xh/hoist/data';
 import {HeaderFilterModel} from '../HeaderFilterModel';
 import {bindable, computed, makeObservable} from '@xh/hoist/mobx';
-import {isArray, isNil} from 'lodash';
+import {isArray, isEmpty, isNil} from 'lodash';
 import {CustomTabModel} from './CustomTabModel';
 
 type OperatorOptionValue = 'blank' | 'not blank' | FieldFilterOperator;
@@ -39,7 +39,7 @@ export class CustomRowModel extends HoistModel {
         } else if (op === 'not blank') {
             op = '!=';
             value = null;
-        } else if (isNil(value)) {
+        } else if (isNil(value) || (isArray(value) && isEmpty(value))) {
             return null;
         }