@xh/hoist 86.2.0 → 86.4.0

package/core/types/Types.ts

@@ -9,6 +9,7 @@ import {LocalDate} from '@xh/hoist/utils/datetime';
 import {MomentInput} from 'moment';
 import {Component, FunctionComponent, ReactElement} from 'react';
 import {DebounceSettings} from 'lodash';
+import {Route} from 'router5';
 
 /** Values available for intents. */
 export type Intent = 'primary' | 'success' | 'warning' | 'danger';
@@ -55,14 +56,22 @@ export type DebounceSpec = number | (DebounceSettings & {interval: number});
  * function that returns a ReactElement. In either case, the function will be called with no arguments.
  */
 export type Content =
-    | ReactElement
-    | FunctionComponent
-    | Component
-    | ElementFactory
-    | (() => ReactElement);
+    ReactElement | FunctionComponent | Component | ElementFactory | (() => ReactElement);
 
 export type DateLike = Date | LocalDate | MomentInput;
 
+/**
+ * A Router5 {@link Route} spec, extended with Hoist's `omit` support for declarative exclusion of
+ * routes at registration time (e.g. role-gated sections). Note `omit` is evaluated once when routes
+ * are added to the router during app startup - it is not reactive.
+ *
+ * @see HoistAppModel.getRoutes
+ */
+export interface HoistRoute extends Omit<Route, 'children'> {
+    omit?: Thunkable<boolean>;
+    children?: HoistRoute[];
+}
+
 /** Valid units for the {@link LocalDate} adjustment methods. */
 export type LocalDateUnit =
     | 'year'

package/data/Store.ts

@@ -559,8 +559,9 @@ export class Store
      * Add new Records to this Store in a local, uncommitted state - i.e. with data that has yet to
      * be persisted back to, or sourced from, the server or other data source of record.
      *
-     * Note that data objects passed to this method must include a unique ID - callers can generate
-     * one with `XH.genId()` if no natural ID can be produced locally on the client.
+     * Note that data objects passed to this method must include a literal `id` property - this
+     * method does *not* run the Store's `idSpec` function. Callers can generate an id with
+     * `XH.genId()` if no natural ID can be produced locally on the client.
      *
      * For StoreRecord additions that originate from the server, call `updateData()` instead.
      *

package/desktop/cmp/filechooser/FileChooser.ts

@@ -12,7 +12,7 @@ import {dropzone} from '@xh/hoist/kit/react-dropzone';
 import {elementFromContent, getLayoutProps} from '@xh/hoist/utils/react';
 import {FileRejection} from 'react-dropzone';
 import {FileChooserModel} from './FileChooserModel';
-import {fromPairs, isEmpty} from 'lodash';
+import {isEmpty} from 'lodash';
 import classNames from 'classnames';
 import {defaultEmptyDisplay} from './impl/DefaultEmptyDisplay';
 import {defaultFileDisplay} from './impl/DefaultFileDisplay';
@@ -88,8 +88,11 @@ export const [FileChooser, fileChooser] = hoistCmp.withFactory<FileChooserProps>
 
         return dropzone({
             ref: model.dropzoneRef,
-            // react-dropzone wants a {type: [extensions]} map; extensions serve as their own keys.
-            accept: accept ? fromPairs(accept.map(ext => [ext, [ext]])) : null,
+            // react-dropzone expects `accept` to be a {type: [extensions]} map. The FileChooserModel
+            // only accepts a list of extensions. Extensions alone are sufficient for validation and
+            // a MIME type is not required. Use `_/_` as a dummy MIME type to prevent console warnings
+            // from react-dropzone.
+            accept: accept ? {'_/_': accept} : null,
             // Disable interaction (drag/click/drop) at the limit; the target shows a clear message.
             disabled: disabled || atLimit,
             maxFiles,

package/desktop/cmp/filechooser/FileChooserModel.ts

@@ -7,7 +7,7 @@
 import {em, li, span, ul, vbox} from '@xh/hoist/cmp/layout';
 import {HoistModel, Some, ToastSpec, XH} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
-import {FileRejection} from '@xh/hoist/kit/react-dropzone';
+import {ErrorCode, FileRejection} from '@xh/hoist/kit/react-dropzone';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {pluralize, withDefault} from '@xh/hoist/utils/js';
 import {createObservableRef} from '@xh/hoist/utils/react';
@@ -187,10 +187,17 @@ export class FileChooserModel extends HoistModel {
         return true;
     }
 
-    private defaultRejectMessage(rejections: FileRejection[]): ReactElement {
-        // 1) Map rejected files to error messages
+    private defaultRejectMessage = (rejections: FileRejection[]): ReactElement => {
+        // 1) Map rejected files to error messages. Use custom message for invalid types to avoid displaying dummy MIME type.
         const errorsByFile = fromPairs(
-            map(rejections, ({file, errors}) => [file.name, map(errors, 'message')])
+            map(rejections, ({file, errors}) => [
+                file.name,
+                map(errors, e =>
+                    e.code === ErrorCode.FileInvalidType
+                        ? `File type must be one of ${this.accept.join(', ')}`
+                        : e.message
+                )
+            ])
         );
 
         // 2) List files with bulleted error messages
@@ -207,7 +214,7 @@ export class FileChooserModel extends HoistModel {
             });
 
         return vbox(rejectItems);
-    }
+    };
 
     private getRejectToastSpec(params: Partial<ToastSpec> | boolean): Partial<ToastSpec> {
         if (params == false) return null;

package/desktop/cmp/filter/FilterChooser.scss

@@ -15,6 +15,48 @@
     margin: 7px 4px;
     align-self: start;
   }
+
+  // Popover mode - collapsed trigger expands into an overlaid popover.
+  &--popover > .bp6-popover-target {
+    display: flex;
+    flex: 1;
+  }
+
+  &__trigger {
+    .xh-select__value-container--is-multi {
+      overflow-y: hidden !important;
+    }
+  }
+
+  // Extra class names required to override the default styles of the popover.
+  &__popover.bp6-popover.bp6-minimal {
+    box-shadow: none;
+
+    // Overlay the expanded input onto the collapsed 30px trigger. Offset follows Blueprint's
+    // resolved placement, which flips (bottom-anchored) near the viewport's bottom edge.
+    &.bp6-popover-placement-bottom {
+      margin-top: -30px !important;
+    }
+    &.bp6-popover-placement-top {
+      margin-bottom: -30px !important;
+    }
+
+    // Content is portaled out of .xh-filter-chooser - restate the flex rule so it fills the width.
+    .bp6-popover-target {
+      display: flex;
+      flex: 1;
+    }
+
+    // Opaque bg to occlude the trigger and page beneath (--xh-input-bg is translucent in dark mode).
+    .bp6-popover-content {
+      background: var(--xh-bg);
+    }
+
+    .xh-select__value-container--is-multi {
+      height: unset;
+      line-height: unset;
+    }
+  }
 }
 
 .xh-filter-chooser-option {

package/desktop/cmp/filter/FilterChooser.ts

@@ -6,14 +6,23 @@
  */
 import {FilterChooserFilter, FilterChooserModel} from '@xh/hoist/cmp/filter';
 import {box, div, hbox, hframe, vbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, HoistProps, LayoutProps, uses} from '@xh/hoist/core';
+import {
+    hoistCmp,
+    HoistModel,
+    HoistProps,
+    LayoutProps,
+    lookup,
+    useLocalModel,
+    uses
+} from '@xh/hoist/core';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import {select} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {menu, menuDivider, menuItem, popover} from '@xh/hoist/kit/blueprint';
-import {withDefault} from '@xh/hoist/utils/js';
-import {splitLayoutProps} from '@xh/hoist/utils/react';
+import {elemWithin, withDefault} from '@xh/hoist/utils/js';
+import {getLayoutProps, splitLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
 import {isEmpty, sortBy} from 'lodash';
 import {badge} from '@xh/hoist/cmp/badge';
@@ -41,6 +50,11 @@ export interface FilterChooserProps extends HoistProps<FilterChooserModel>, Layo
     placeholder?: string;
     /** Icon clicked to launch favorites menu. (Defaults to Icon.favorite()) */
     favoritesIcon?: ReactElement;
+    /**
+     * True to render collapsed in-place, expanding into a popover when opened - useful in toolbars
+     * and other height-constrained containers. Opens in the direction set by `menuPlacement`.
+     */
+    popover?: boolean;
 }
 
 /**
@@ -50,6 +64,30 @@ export interface FilterChooserProps extends HoistProps<FilterChooserModel>, Layo
 export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooserProps>({
     model: uses(FilterChooserModel),
     className: 'xh-filter-chooser',
+    render({model, className, ...props}, ref) {
+        return props.popover
+            ? popoverFilterChooser({model, className, ...props, ref})
+            : filterChooserControl({model, className, ...props, ref});
+    }
+});
+
+//------------------
+// Implementation
+//------------------
+interface FilterChooserControlProps extends FilterChooserProps {
+    /** Internal - false to render a non-interactive display (the collapsed popover trigger). */
+    xhInteractive?: boolean;
+    /** Internal - override for the favorites menu open state. */
+    xhFavoritesOpen?: boolean;
+}
+
+/**
+ * The Select-based control shared by the inline FilterChooser and both faces (collapsed trigger and
+ * expanded content) of the popover variant. Only the interactive instance binds `model.inputRef`,
+ * so the popover can mount trigger and content simultaneously without contention.
+ */
+const filterChooserControl = hoistCmp.factory<FilterChooserControlProps>({
+    model: uses(FilterChooserModel),
     render({model, className, ...props}, ref) {
         const [layoutProps, chooserProps] = splitLayoutProps(props),
             {
@@ -68,7 +106,9 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
                 maxMenuHeight,
                 menuPlacement,
                 menuWidth,
-                favoritesIcon
+                favoritesIcon,
+                xhInteractive = true,
+                xhFavoritesOpen
             } = chooserProps,
             disabled = unsupportedFilter || chooserProps.disabled,
             placeholder = unsupportedFilter
@@ -90,7 +130,8 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
                         flex: 1,
                         height: layoutProps?.height,
                         bind: 'selectValue',
-                        ref: inputRef,
+                        // Only the interactive instance owns the shared inputRef.
+                        ref: xhInteractive ? inputRef : undefined,
 
                         autoFocus,
                         disabled,
@@ -119,12 +160,15 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
                             },
                             components: {
                                 DropdownIndicator: () => favoritesIconCmp(model, favoritesIcon)
-                            }
+                            },
+                            // Display-only trigger: suppress menu + typing, but leave clear and
+                            // favorites affordances live for single-click access.
+                            ...(xhInteractive ? {} : {menuIsOpen: false, isSearchable: false})
                         }
                     })
                 ),
                 content: favoritesMenu(),
-                isOpen: favoritesIsOpen,
+                isOpen: xhFavoritesOpen ?? favoritesIsOpen,
                 position: 'bottom-right',
                 minimal: true,
                 onInteraction: willOpen => {
@@ -136,6 +180,102 @@ export const [FilterChooser, filterChooser] = hoistCmp.withFactory<FilterChooser
     }
 });
 
+/**
+ * Wraps a FilterChooser so it renders collapsed in-place and expands into a popover when opened,
+ * allowing it to grow vertically beyond the height of a toolbar. The collapsed trigger always
+ * occupies its space (so surrounding layout never shifts) and routes single clicks on its clear
+ * and favorites controls directly, rather than first opening the popover.
+ */
+const popoverFilterChooser = hoistCmp.factory<FilterChooserProps>({
+    model: uses(FilterChooserModel),
+    render({model, className, ...props}, ref) {
+        const impl = useLocalModel(FilterChooserLocalModel),
+            {popoverIsOpen} = impl,
+            {popover: _popover, ...rest} = props,
+            layoutProps = getLayoutProps(rest);
+
+        return box({
+            ref,
+            className: classNames(className, 'xh-filter-chooser--popover'),
+            ...layoutProps,
+            item: popover({
+                isOpen: popoverIsOpen,
+                popoverClassName: 'xh-filter-chooser__popover',
+                matchTargetWidth: true,
+                minimal: true,
+                position: 'bottom',
+                item: filterChooserControl({
+                    model,
+                    flex: 1,
+                    className: 'xh-filter-chooser__trigger',
+                    ...rest,
+                    displayCount: true,
+                    xhInteractive: false,
+                    // Trigger hosts the favorites menu only while collapsed; once open, the
+                    // expanded content takes over.
+                    xhFavoritesOpen: model.favoritesIsOpen && !popoverIsOpen
+                }),
+                content: filterChooserControl({
+                    model,
+                    flex: 1,
+                    className: 'xh-filter-chooser__content',
+                    ...rest,
+                    displayCount: true
+                }),
+                onInteraction: (willOpen, e) => {
+                    if (willOpen) {
+                        // Let clicks on the inline clear / favorites controls act directly.
+                        const target = e?.target as HTMLElement;
+                        if (
+                            target &&
+                            (elemWithin(target, 'xh-select__clear-indicator') ||
+                                elemWithin(target, 'xh-filter-chooser-favorite-icon'))
+                        ) {
+                            return;
+                        }
+                        impl.open();
+                    } else {
+                        impl.close();
+                    }
+                }
+            })
+        });
+    }
+});
+
+class FilterChooserLocalModel extends HoistModel {
+    override xhImpl = true;
+
+    @lookup(FilterChooserModel)
+    model: FilterChooserModel;
+
+    @bindable
+    popoverIsOpen: boolean = false;
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    open() {
+        this.popoverIsOpen = true;
+
+        // Focus the (now-mounted) interactive input and open its menu once available.
+        this.addReaction({
+            when: () => !!this.model.inputRef.current,
+            run: () => {
+                const inputRef = this.model.inputRef.current;
+                inputRef.focus();
+                (inputRef as any).reactSelectRef.current?.openMenu('first');
+            }
+        });
+    }
+
+    close() {
+        this.popoverIsOpen = false;
+    }
+}
+
 //-----------------
 // Options
 //------------------

package/desktop/cmp/filter/PopoverFilterChooser.ts

@@ -5,100 +5,23 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 
-import {hoistCmp, HoistModel, lookup, useLocalModel, uses} from '@xh/hoist/core';
-import {bindable, makeObservable} from '@xh/hoist/mobx';
-import {box, hframe} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
-import {popover} from '@xh/hoist/kit/blueprint';
-import {getLayoutProps} from '@xh/hoist/utils/react';
-import './PopoverFilterChooser.scss';
-import {filterChooser, FilterChooserProps} from './FilterChooser';
 import {FilterChooserModel} from '@xh/hoist/cmp/filter';
+import {filterChooser, FilterChooserProps} from './FilterChooser';
 
 /**
  * A wrapper around a FilterChooser that renders in a popover when opened, allowing it to expand
  * vertically beyond the height of a toolbar.
+ *
+ * @deprecated Use `filterChooser({popover: true})` instead - the popover behavior is now a built-in
+ *      mode of `FilterChooser`. This alias will be removed in a future major release.
  * @see FilterChooser
  */
 export const [PopoverFilterChooser, popoverFilterChooser] =
     hoistCmp.withFactory<FilterChooserProps>({
         model: uses(FilterChooserModel),
-        className: 'xh-popover-filter-chooser',
-        render({model, className, ...props}, ref) {
-            const layoutProps = getLayoutProps(props),
-                impl = useLocalModel(PopoverFilterChooserLocalModel);
-
-            return box({
-                ref,
-                className,
-                ...layoutProps,
-                item: popover({
-                    isOpen: impl.popoverIsOpen,
-                    popoverClassName: 'xh-popover-filter-chooser__popover',
-                    item: hframe(
-                        filterChooser({
-                            model,
-                            // Omit when popover is open to force update the inputRef
-                            omit: impl.popoverIsOpen,
-                            className: 'xh-popover-filter-chooser__filter-chooser',
-                            displayCount: true,
-                            ...props,
-                            disabled: true
-                        })
-                    ),
-                    content: filterChooser({
-                        model,
-                        displayCount: true,
-                        ...props
-                    }),
-                    matchTargetWidth: true,
-                    minimal: true,
-                    position: 'bottom',
-                    onInteraction: open => {
-                        if (open) {
-                            impl.open();
-                        } else {
-                            impl.close();
-                        }
-                    }
-                })
-            });
+        render(props) {
+            return filterChooser({popover: true, ...props});
         }
     });
-
-class PopoverFilterChooserLocalModel extends HoistModel {
-    override xhImpl = true;
-
-    @lookup(FilterChooserModel)
-    model: FilterChooserModel;
-
-    @bindable
-    popoverIsOpen: boolean = false;
-
-    get displaySelectValue() {
-        return this.model.selectValue[0];
-    }
-
-    constructor() {
-        super();
-        makeObservable(this);
-    }
-
-    open() {
-        this.popoverIsOpen = true;
-
-        // Focus and open the menu when rendered
-        this.addReaction({
-            when: () => !!this.model.inputRef.current,
-            run: () => {
-                const inputRef = this.model.inputRef.current;
-                inputRef.focus();
-                (inputRef as any).reactSelectRef.current?.openMenu('first');
-            }
-        });
-    }
-
-    close() {
-        this.popoverIsOpen = false;
-    }
-}

package/desktop/cmp/grid/editors/impl/InlineEditorModel.ts

@@ -35,7 +35,12 @@ export function useInlineEditorModel(
 
     useGridCellEditor({
         // This is called in full-row editing when the user tabs into the cell
-        focusIn: useCallback(() => impl.focus(), [impl])
+        focusIn: useCallback(() => impl.focus(), [impl]),
+        // Backstop to flush any pending edit when editing ends, in case no blur fired (#4134).
+        isCancelAfterEnd: useCallback(() => {
+            impl.ref.current?.doCommit();
+            return false;
+        }, [impl])
     });
 
     return component({

package/desktop/cmp/grid/find/impl/GridFindFieldImplModel.ts

@@ -268,7 +268,6 @@ export class GridFindFieldImplModel extends HoistModel {
 
     private getActiveFields(): string[] {
         const {gridModel, includeFields, excludeFields} = this,
-            groupBy = gridModel.groupBy,
             visibleCols = gridModel.getVisibleLeafColumns();
 
         let ret = ['id', ...gridModel.store.fieldNames];
@@ -293,12 +292,11 @@ export class GridFindFieldImplModel extends HoistModel {
         // Run exclude once more to support explicitly excluding a dot-sep field added above.
         if (excludeFields) ret = without(ret, ...excludeFields);
 
-        // Final filter for column visibility, or explicit request for inclusion.
+        // Final filter for column visibility, or explicit request for inclusion. Deliberately not
+        // keyed to groupBy, so query results stay stable across regrouping (see #4070).
         ret = ret.filter(f => {
             return (
-                (includeFields && includeFields.includes(f)) ||
-                visibleCols.find(c => c.field === f) ||
-                groupBy.includes(f)
+                (includeFields && includeFields.includes(f)) || visibleCols.find(c => c.field === f)
             );
         });
 

package/desktop/cmp/grid/impl/colchooser/ColChooserModel.ts

@@ -4,7 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {ColChooserConfig, GridModel} from '@xh/hoist/cmp/grid';
+import {ColChooserConfig, GridModel, IColChooserModel} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
 import type {FilterMatchMode} from '@xh/hoist/data';
 import {LeftRightChooserModel} from '@xh/hoist/desktop/cmp/leftrightchooser';
@@ -15,7 +15,7 @@ import {sortBy} from 'lodash';
  * State management for the ColChooser component.
  * @internal
  */
-export class ColChooserModel extends HoistModel {
+export class ColChooserModel extends HoistModel implements IColChooserModel {
     override xhImpl = true;
 
     gridModel: GridModel;

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

@@ -12,7 +12,7 @@ import {dateInput, numberInput, select, textInput} from '@xh/hoist/desktop/cmp/i
 import {Icon} from '@xh/hoist/icon';
 import {kebabCase} from 'lodash';
 
-import {CustomRowModel} from './CustomRowModel';
+import {CustomRowModel, usesMultiValueInput} from './CustomRowModel';
 
 /**
  * Row with operator and value combination for CustomTab.
@@ -74,17 +74,7 @@ const inputField = hoistCmp.factory<CustomRowModel>(({model}) => {
             ...fieldSpec.inputProps
         };
 
-    if (fieldSpec.isNumericFieldType) {
-        return numberInput({
-            ...props,
-            enableShorthandUnits: true
-        });
-    } else if (fieldSpec.isDateBasedFieldType) {
-        return dateInput({
-            ...props,
-            valueType: fieldSpec.fieldType as 'localDate' | 'date'
-        });
-    } else if (fieldSpec.supportsSuggestions(op as FieldFilterOperator)) {
+    if (usesMultiValueInput(fieldSpec, op as FieldFilterOperator)) {
         return select({
             ...props,
             options: fieldSpec.values,
@@ -94,6 +84,16 @@ const inputField = hoistCmp.factory<CustomRowModel>(({model}) => {
             hideSelectedOptionCheck: true,
             enableClear: false
         });
+    } else if (fieldSpec.isNumericFieldType) {
+        return numberInput({
+            ...props,
+            enableShorthandUnits: true
+        });
+    } else if (fieldSpec.isDateBasedFieldType) {
+        return dateInput({
+            ...props,
+            valueType: fieldSpec.fieldType as 'localDate' | 'date'
+        });
     } else {
         return textInput(props);
     }

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

@@ -4,6 +4,7 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
+import type {GridFilterFieldSpec} from '@xh/hoist/cmp/grid';
 import {HoistModel} from '@xh/hoist/core';
 import {FieldFilterOperator, FieldFilterSpec} from '@xh/hoist/data';
 import {HeaderFilterModel} from '../HeaderFilterModel';
@@ -13,6 +14,23 @@ import {CustomTabModel} from './CustomTabModel';
 
 type OperatorOptionValue = 'blank' | 'not blank' | FieldFilterOperator;
 
+/**
+ * Whether a row for the given op renders the multi-value `select` input - the only custom-tab input
+ * that holds an array of values directly. The single-value inputs (number, date, text) are used
+ * otherwise, so array filter values bound for them must be expanded into one row each (see
+ * `CustomTabModel.doSyncWithFilter`). Mirrors the input choice made in `CustomRow`.
+ */
+export function usesMultiValueInput(
+    fieldSpec: GridFilterFieldSpec,
+    op: FieldFilterOperator
+): boolean {
+    return (
+        !fieldSpec.isNumericFieldType &&
+        !fieldSpec.isDateBasedFieldType &&
+        fieldSpec.supportsSuggestions(op)
+    );
+}
+
 /**
  * @internal
  */

package/desktop/cmp/grid/impl/filter/headerfilter/custom/CustomTab.scss

@@ -9,6 +9,11 @@
     }
   }
 
+  &__unsupported {
+    padding: var(--xh-pad-px);
+    color: var(--xh-text-color-muted);
+  }
+
   &__tbar {
     background-color: transparent;
     .xh-button {

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

@@ -23,13 +23,24 @@ import {CustomTabModel} from './CustomTabModel';
 export const customTab = hoistCmp.factory({
     model: uses(CustomTabModel),
     render({model}) {
+        const {rowModels} = model;
+        if (!rowModels) {
+            return panel({
+                className: 'xh-custom-filter-tab',
+                item: div({
+                    className: 'xh-custom-filter-tab__unsupported',
+                    item: 'This filter is too complex to edit here.'
+                })
+            });
+        }
+
         return panel({
             className: 'xh-custom-filter-tab',
             tbar: tbar(),
             items: div({
                 className: 'xh-custom-filter-tab__list',
                 items: [
-                    ...model.rowModels.map(m => customRow({model: m})),
+                    ...rowModels.map(m => customRow({model: m})),
                     div({
                         className: 'xh-custom-filter-tab__list__add-btn-row',
                         items: [
@@ -52,7 +63,7 @@ export const customTab = hoistCmp.factory({
 const tbar = hoistCmp.factory<CustomTabModel>(({model}) => {
     return toolbar({
         className: 'xh-custom-filter-tab__tbar',
-        omit: model.rowModels.length < 2,
+        omit: !model.rowModels || model.rowModels.length < 2,
         compact: true,
         items: [
             filler(),