@xh/hoist 86.1.0 → 86.2.0

package/cmp/grid/GridModel.ts

@@ -305,6 +305,10 @@ export interface GridConfig {
      * expand/collapse options in the default context menu will be enhanced to allow users to
      * expand/collapse to a specific level. See {@link GroupingChooserModel.valueDisplayNames}
      * for a convenient getter that will satisfy this API when a GroupingChooser is in play.
+     *
+     * Labels are matched to levels top-down and need not cover the full depth of the grid - provide
+     * a partial array to label only the top levels (e.g. when deeper levels should not be
+     * expand-to targets). Deeper, unlabelled levels are omitted from the menu.
      */
     levelLabels?: Thunkable<string[]>;
 
@@ -1174,15 +1178,23 @@ export class GridModel extends HoistModel {
 
     /**
      * Get the resolved level labels for the current state of the grid.
+     * An over-long array is truncated to the current `maxDepth`.
      */
     get resolvedLevelLabels(): string[] {
         const {maxDepth, levelLabels} = this,
             ret = executeIfFunction(levelLabels);
-        if (ret && ret.length < maxDepth + 1) {
-            this.logDebug('Value produced by `GridModel.levelLabels` has insufficient length.');
-            return null;
-        }
-        return ret ? take(ret, maxDepth + 1) : null;
+        return !isEmpty(ret) ? take(ret, maxDepth + 1) : null;
+    }
+
+    /**
+     * True if the given `resolvedLevelLabels` index is the grid's current expand level - used to
+     * mark the active item in the "Expand to..." menu. The deepest labelled level counts as current
+     * whenever the grid is expanded to or beyond it.
+     */
+    isCurrentExpandLevel(idx: number): boolean {
+        const {expandLevel, resolvedLevelLabels} = this,
+            lastIdx = resolvedLevelLabels?.length - 1;
+        return expandLevel === idx || (idx === lastIdx && expandLevel > lastIdx);
     }
 
     /**

package/cmp/grid/filter/GridFilterFieldSpec.ts

@@ -4,7 +4,6 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {ColumnRenderer} from '@xh/hoist/cmp/grid';
 import {HoistInputProps} from '@xh/hoist/cmp/input';
 import {PlainObject} from '@xh/hoist/core';
 import {
@@ -19,17 +18,38 @@ import {
     BaseFilterFieldSpecConfig
 } from '@xh/hoist/data/filter/BaseFilterFieldSpec';
 import {castArray, compact, flatMap, isDate, isEmpty, uniqBy} from 'lodash';
+import {ReactNode} from 'react';
 import {GridFilterModel} from './GridFilterModel';
 
+/**
+ * Produces the display content for an entry in the Values tab of a column filter. Must be a pure
+ * transform of the value - the values list carries no source record, and there is no column or
+ * grid context to reach for (unlike a Column's `renderer`, which runs against the source grid).
+ */
+export type GridFilterRenderer = (value: any) => ReactNode;
+
+/**
+ * Produces the value to sort by for an entry in the Values tab of a column filter. Must be a pure
+ * transform of the value - the values list carries no source record, and there is no column or
+ * grid context to reach for (unlike a Column's `sortValue`, which runs against the source grid).
+ */
+export type GridFilterSortValueFn = (value: any) => any;
+
 export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
     /** GridFilterModel instance owning this fieldSpec. */
     filterModel?: GridFilterModel;
 
     /**
-     * Function returning a formatted string for each value in this values filter display.
-     * If not provided, the Column's renderer will be used.
+     * Pure function producing the display content for each entry in the values filter display. If
+     * not provided, the Column's renderer is used where it can be applied to a bare value.
+     */
+    renderer?: GridFilterRenderer;
+
+    /**
+     * Pure function producing the value to sort each entry of the values filter display by. If not
+     * provided, the Column's sortValue is used where it can be applied to a bare value.
      */
-    renderer?: ColumnRenderer;
+    sortValue?: GridFilterSortValueFn;
 
     /**
      * Props to pass through to the HoistInput components used on the custom filter tab.
@@ -47,7 +67,8 @@ export interface GridFilterFieldSpecConfig extends BaseFilterFieldSpecConfig {
  */
 export class GridFilterFieldSpec extends BaseFilterFieldSpec {
     filterModel: GridFilterModel;
-    renderer: ColumnRenderer;
+    renderer: GridFilterRenderer;
+    sortValue: GridFilterSortValueFn;
     inputProps: PlainObject;
     defaultOp: FieldFilterOperator;
 
@@ -57,6 +78,7 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
     constructor({
         filterModel,
         renderer,
+        sortValue,
         inputProps,
         defaultOp,
         ...rest
@@ -65,6 +87,7 @@ export class GridFilterFieldSpec extends BaseFilterFieldSpec {
 
         this.filterModel = filterModel;
         this.renderer = renderer;
+        this.sortValue = sortValue;
         this.inputProps = inputProps;
         this.defaultOp = this.ops.includes(defaultOp) ? defaultOp : this.ops[0];
     }

package/cmp/grid/impl/MenuSupport.ts

@@ -280,15 +280,13 @@ function levelExpandAction(gridModel: GridModel): RecordAction {
     return new RecordAction({
         text: 'Expand to...',
         displayFn: () => {
-            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
+            const {maxDepth, resolvedLevelLabels} = gridModel;
 
             // Don't show for flat grid models or if we don't have labels
             if (!maxDepth || !resolvedLevelLabels) return {hidden: true};
 
             const items = resolvedLevelLabels.map((label, idx) => {
-                const isCurrLevel =
-                    expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
+                const isCurrLevel = gridModel.isCurrentExpandLevel(idx);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : null,

package/desktop/cmp/button/grid/ExpandToLevelButton.ts

@@ -28,7 +28,8 @@ export interface ExpandToLevelButtonProps extends Omit<ButtonProps, 'title'> {
 
 /**
  * A menu button to expand a multi-level grouped or tree grid out to a desired level.
- * Requires {@link GridConfig.levelLabels} to be configured on the bound GridModel.
+ * Requires {@link GridConfig.levelLabels} to be configured on the bound GridModel - the menu offers
+ * one entry per labelled level, so a partial array will limit the available expand-to targets.
  */
 export const [ExpandToLevelButton, expandToLevelButton] =
     hoistCmp.withFactory<ExpandToLevelButtonProps>({
@@ -53,13 +54,11 @@ export const [ExpandToLevelButton, expandToLevelButton] =
             }
 
             // Render a disabled button if requested, if we have a flat grid, or no level labels
-            const {maxDepth, expandLevel, resolvedLevelLabels} = gridModel;
+            const {maxDepth, resolvedLevelLabels} = gridModel;
             if (disabled || !maxDepth || !resolvedLevelLabels) return disabledButton();
 
             const menuItems: MenuItemLike[] = resolvedLevelLabels.map((label, idx) => {
-                const isCurrLevel =
-                    expandLevel === idx ||
-                    (expandLevel > maxDepth && idx === resolvedLevelLabels.length - 1);
+                const isCurrLevel = gridModel.isCurrentExpandLevel(idx);
 
                 return {
                     icon: isCurrLevel ? Icon.check() : Icon.placeholder(),

package/desktop/cmp/grid/editors/NumberEditor.ts

@@ -6,8 +6,8 @@
  */
 import {withDefault} from '@xh/hoist/utils/js';
 import {isNil} from 'lodash';
-import {useCallback, useEffect} from 'react';
-import {CustomCellEditorProps, useGridCellEditor} from '@xh/hoist/kit/ag-grid';
+import {useEffect} from 'react';
+import {CustomCellEditorProps} from '@xh/hoist/kit/ag-grid';
 import {hoistCmp} from '@xh/hoist/core';
 import {numberInput, NumberInputProps} from '@xh/hoist/desktop/cmp/input';
 import '@xh/hoist/desktop/register';
@@ -39,20 +39,19 @@ export const [NumberEditor, numberEditor] = hoistCmp.withFactory<NumberEditorPro
     }
 });
 
-const useNumberGuard = ({onValueChange, eventKey}: CustomCellEditorProps) => {
-    // Needed (strangely) by agGrid to trigger call of isCancelBeforeStart
-    useEffect(() => {
-        if (eventKey?.length === 1) onValueChange(eventKey);
-    }, [eventKey, onValueChange]);
-
-    // Gets called before editor component is rendered, to give agGrid a chance to
-    // cancel the editing before it even starts if char is not a number.
-    const isCancelBeforeStart = useCallback(
-        () => eventKey?.length === 1 && '1234567890'.indexOf(eventKey) < 0,
-        [eventKey]
-    );
+// Characters that can validly begin a numeric entry - digits, sign, and decimal point.
+const NUMBER_START_RE = /[0-9.+-]/;
 
-    useGridCellEditor({
-        isCancelBeforeStart
-    });
+const useNumberGuard = ({onValueChange, eventKey, stopEditing}: CustomCellEditorProps) => {
+    // When editing is started by typing a printable character, seed the editor with it if it can
+    // legally begin a number (digit, `-`, `+`, or `.`), otherwise stop editing to reject the
+    // keystroke - reverting to the original value, as the editor was never seeded.
+    useEffect(() => {
+        if (eventKey?.length !== 1) return;
+        if (NUMBER_START_RE.test(eventKey)) {
+            onValueChange(eventKey);
+        } else {
+            stopEditing(true);
+        }
+    }, [eventKey, onValueChange, stopEditing]);
 };

package/desktop/cmp/grid/editors/SelectEditor.ts

@@ -30,16 +30,21 @@ export const [SelectEditor, selectEditor] = hoistCmp.withFactory<SelectEditorPro
                 onCommit: flushOnCommit
                     ? () => wait().then(() => props.agParams.stopEditing())
                     : null,
-                rsOptions: {
-                    styles: {
-                        menu: styles => ({
-                            ...styles,
-                            whiteSpace: 'nowrap',
-                            width: 'auto',
-                            minWidth: '100%'
-                        })
-                    }
-                },
+                // Auto-size the menu to content, not the narrow cell - but skip when width is already
+                // set, via windowed measurement (#4325) or an explicit `menuWidth` (#4057).
+                rsOptions:
+                    props.inputProps?.enableWindowed || props.inputProps?.menuWidth != null
+                        ? {}
+                        : {
+                              styles: {
+                                  menu: styles => ({
+                                      ...styles,
+                                      whiteSpace: 'nowrap',
+                                      width: 'auto',
+                                      minWidth: '100%'
+                                  })
+                              }
+                          },
                 ...props.inputProps
             }
         };

package/desktop/cmp/grid/impl/filter/GridFilterDialog.ts

@@ -55,7 +55,7 @@ const filterForm = hoistCmp.factory(({impl}) => {
         fieldDefaults: {label: null, minimal: true},
         item: formField({
             field: 'filter',
-            item: jsonInput()
+            item: jsonInput({autoFormat: true})
         })
     });
 });
@@ -147,7 +147,7 @@ class GridFilterDialogLocalModel extends HoistModel {
     loadForm() {
         const filter = this.model.filter?.removeFunctionFilters();
         this.formModel.init({
-            filter: JSON.stringify(filter?.toJSON() ?? null, undefined, 2)
+            filter: JSON.stringify(filter ?? null)
         });
     }
 

package/desktop/cmp/grid/impl/filter/headerfilter/values/ValuesTabModel.ts

@@ -4,13 +4,28 @@
  *
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
-import {GridFilterModel, GridModel} from '@xh/hoist/cmp/grid';
+import {
+    GridFilterModel,
+    GridFilterRenderer,
+    GridFilterSortValueFn,
+    GridModel
+} from '@xh/hoist/cmp/grid';
 import {HoistModel, managed} from '@xh/hoist/core';
 import type {FieldFilterOperator, FieldFilterSpec} from '@xh/hoist/data';
 import {checkbox} from '@xh/hoist/desktop/cmp/input';
 import {Icon} from '@xh/hoist/icon';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
-import {castArray, difference, flatten, isEmpty, map, partition, uniq, without} from 'lodash';
+import {
+    castArray,
+    difference,
+    flatten,
+    isEmpty,
+    isFunction,
+    map,
+    partition,
+    uniq,
+    without
+} from 'lodash';
 import {HeaderFilterModel} from '../HeaderFilterModel';
 
 export class ValuesTabModel extends HoistModel {
@@ -281,8 +296,18 @@ export class ValuesTabModel extends HoistModel {
     private createGridModel() {
         const {BLANK_PLACEHOLDER} = GridFilterModel,
             {headerFilterModel, fieldSpec} = this,
-            {fieldType, column} = headerFilterModel,
-            renderer = fieldSpec.renderer ?? (fieldType !== 'tags' ? column.renderer : null);
+            {fieldType, column} = headerFilterModel;
+
+        // Default to the column's renderer/sortValue, but only where they apply to a bare value -
+        // we call them with the value alone (see below), so treat them as pure value transforms.
+        const renderer =
+                fieldSpec.renderer ??
+                (fieldType !== 'tags' ? (column.renderer as GridFilterRenderer) : null),
+            sortValue =
+                fieldSpec.sortValue ??
+                (fieldType !== 'tags' && isFunction(column.sortValue)
+                    ? (column.sortValue as GridFilterSortValueFn)
+                    : null);
 
         return new GridModel({
             store: {
@@ -340,9 +365,23 @@ export class ValuesTabModel extends HoistModel {
                         if (v2 === BLANK_PLACEHOLDER) return -1 * mul;
                         return defaultComparator(v1, v2);
                     },
-                    renderer: (value, context) => {
-                        if (value === BLANK_PLACEHOLDER) return value;
-                        return renderer ? renderer(value, context) : value;
+                    // Apply renderer/sortValue as pure value transforms - pass no context, skip the
+                    // blank placeholder, and fall back to the raw value if either throws.
+                    sortValue: v => {
+                        if (v === BLANK_PLACEHOLDER || !sortValue) return v;
+                        try {
+                            return sortValue(v);
+                        } catch {
+                            return v;
+                        }
+                    },
+                    renderer: v => {
+                        if (v === BLANK_PLACEHOLDER || !renderer) return v;
+                        try {
+                            return renderer(v);
+                        } catch {
+                            return v;
+                        }
                     }
                 }
             ],

package/desktop/cmp/input/CheckboxButton.ts

@@ -47,7 +47,27 @@ class CheckboxButtonInputModel extends HoistInputModel {
 // Implementation
 //----------------------------------
 const cmp = hoistCmp.factory<CheckboxButtonInputModel>(
-    ({model, text, icon, rightIcon, checkedIcon, uncheckedIcon, iconSide, ...props}, ref) => {
+    (
+        {
+            // HoistInput props - exclude from passthrough to BP
+            bind,
+            value,
+            commitOnChange,
+            onChange,
+            onCommit,
+            // Consumed by this component
+            model,
+            text,
+            icon,
+            rightIcon,
+            checkedIcon,
+            uncheckedIcon,
+            iconSide,
+            // Remainder passed to hoist button & BP button
+            ...props
+        },
+        ref
+    ) => {
         const checked = !!model.renderValue,
             toggleIcon = checked
                 ? withDefault(checkedIcon, Icon.checkSquare({prefix: 'fas', intent: 'primary'}))

package/desktop/cmp/input/CodeInput.ts

@@ -62,6 +62,14 @@ export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps
     /** True to focus the control on render. */
     autoFocus?: boolean;
 
+    /**
+     * True to automatically format content for display using the configured `formatter`.
+     * Defaults to true for `readonly` inputs - set false to opt out. May also be enabled on
+     * editable inputs, in which case content is formatted on blur (never mid-edit, so user
+     * edits and cursor position are preserved while typing).
+     */
+    autoFormat?: boolean;
+
     /** False to not commit on every change/keystroke, default true. */
     commitOnChange?: boolean;
 
@@ -224,7 +232,7 @@ class CodeInputModel extends HoistInputModel {
                 ? button({
                       icon: Icon.magic(),
                       title: 'Auto-format',
-                      onClick: () => this.onAutoFormat()
+                      onClick: () => this.formatAndSetEditorValue()
                   })
                 : null,
             showFullscreenButton
@@ -321,7 +329,16 @@ class CodeInputModel extends HoistInputModel {
         this.editor = new EditorView({state, parent: container});
     };
 
-    onAutoFormat() {
+    get autoFormat(): boolean {
+        const {autoFormat, readonly} = this.componentProps;
+        return withDefault(autoFormat, !!readonly);
+    }
+
+    override toInternal(val: any) {
+        return this.autoFormat ? this.tryPrettyPrint(val) : val;
+    }
+
+    private formatAndSetEditorValue() {
         if (!this.editor) return;
         const val = this.tryPrettyPrint(this.editor.state.doc.toString());
         this.editor.dispatch({changes: {from: 0, to: this.editor.state.doc.length, insert: val}});
@@ -443,7 +460,7 @@ class CodeInputModel extends HoistInputModel {
                     {
                         key: 'Mod-p',
                         run: () => {
-                            this.onAutoFormat();
+                            this.formatAndSetEditorValue();
                             return true;
                         }
                     }

package/desktop/cmp/input/NumberInput.ts

@@ -61,7 +61,7 @@ export interface NumberInputProps extends HoistProps, LayoutProps, StyleProps, H
     /** Text to display when control is empty. */
     placeholder?: string;
 
-    /** Max decimal precision of the value, defaults to 4. */
+    /** Max decimal precision of the value, defaults to 4. Set to null for full, unrestricted precision. */
     precision?: NumericPrecision;
 
     /** Element to display inline on the right side of the input. */

package/desktop/cmp/input/Select.ts

@@ -34,6 +34,7 @@ import classNames from 'classnames';
 import {castArray, escapeRegExp, isEmpty, isEqual, isNil, isPlainObject, keyBy} from 'lodash';
 import {ReactElement, ReactNode} from 'react';
 import {components} from 'react-select';
+import {calcWindowedMenuWidth} from './impl/CalcWindowedMenuWidth';
 import './Select.scss';
 
 export const MENU_PORTAL_ID = 'xh-select-input-portal';
@@ -224,6 +225,8 @@ class SelectInputModel extends HoistInputModel {
     // Maintained for (but not passed to) async select to resolve value string <> option objects.
     @bindable.ref internalOptions = [];
 
+    @observable windowedMenuWidth: number = null;
+
     // Prop-backed convenience getters
     get asyncMode(): boolean {
         return !!this.componentProps.queryFn;
@@ -290,6 +293,13 @@ class SelectInputModel extends HoistInputModel {
             run: opts => {
                 opts = this.normalizeOptions(opts);
                 this.internalOptions = opts;
+                if (this.windowedMode) {
+                    this.windowedMenuWidth = calcWindowedMenuWidth(
+                        opts,
+                        o => this.formatOptionLabel(o, {context: 'menu'}),
+                        this.getOrCreatePortalDiv()
+                    );
+                }
             },
             fireImmediately: true
         });
@@ -780,9 +790,10 @@ const cmp = hoistCmp.factory<SelectInputModel>(({model, className, ...props}, re
         rsProps.formatCreateLabel = model.createMessageFn;
     }
 
-    if (props.menuWidth) {
+    const menuWidth = props.menuWidth ?? (model.windowedMode ? model.windowedMenuWidth : null);
+    if (menuWidth != null) {
         rsProps.styles = {
-            menu: provided => ({...provided, width: `${props.menuWidth}px`}),
+            menu: provided => ({...provided, width: menuWidth, minWidth: '100%'}),
             ...props.rsOptions?.styles
         };
     }

package/desktop/cmp/input/impl/CalcWindowedMenuWidth.ts

@@ -0,0 +1,106 @@
+/*
+ * 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 {logWarn, stripTags} from '@xh/hoist/utils/js';
+import {renderToStaticMarkup} from '@xh/hoist/utils/react';
+import {isEmpty, isNil, isString, sortBy, takeRight} from 'lodash';
+import {isValidElement, ReactNode} from 'react';
+
+/** Max number of (widest) options to render and measure when sizing a windowed menu. */
+const SIZE_CALC_SAMPLES = 25;
+/** Allowance for the vertical scrollbar present in windowed (virtualized) menus. */
+const SCROLLBAR_PX = 20;
+
+/**
+ * Compute an explicit pixel width for a windowed (virtualized) `Select` menu.
+ *
+ * Windowed menus can't auto-size via CSS - react-window absolutely-positions rows at width:100%,
+ * so option content never widens the menu and it collapses to the control width. This restores
+ * content-based sizing using Canvas + off-screen DOM, the same render-and-measure approach as the
+ * grid's `ColumnWidthCalculator`: render each option's actual menu markup (via the configured
+ * `optionRenderer`, if any), canvas-estimate its width to pick the widest candidates, then measure
+ * only those candidates' displayed width in a hidden probe - so custom `optionRenderer`s (icons,
+ * multi-element content, etc.) size correctly. Unlike the grid (which may autosize many columns
+ * over thousands of records), this renders one menu's options once per options change.
+ *
+ * @param options - normalized (possibly grouped) Select options.
+ * @param renderOption - renders an option to its menu `ReactNode` (e.g. model.formatOptionLabel).
+ * @param portal - shared menu portal div, used to host probes so menu CSS (font, padding) applies.
+ * @returns explicit menu width in px, or null to fall back to the control width.
+ * @internal
+ */
+export function calcWindowedMenuWidth(
+    options: any[],
+    renderOption: (opt: any) => ReactNode,
+    portal: HTMLElement
+): number {
+    const flatOpts = [],
+        collect = opts => opts.forEach(o => (o.options ? collect(o.options) : flatOpts.push(o)));
+    collect(options);
+    if (isEmpty(flatOpts)) return null;
+
+    // Render a hidden probe (menu > option) into the portal, so menu CSS (font, padding) applies
+    // via its location under document.body.xh-app.
+    const menu = document.createElement('div'),
+        option = document.createElement('div');
+    menu.className = 'xh-select__menu';
+    menu.style.cssText = 'position:absolute; visibility:hidden; height:0; overflow:hidden';
+    option.className = 'xh-select__option';
+    option.style.cssText = 'width:max-content; white-space:nowrap';
+    menu.appendChild(option);
+    portal.appendChild(menu);
+
+    try {
+        // 1) Render each option's menu markup and canvas-estimate its width (tags stripped).
+        const ctx = getCanvasContext(option),
+            estimates = flatOpts.map(o => {
+                const node = renderOption(o),
+                    markup = isValidElement(node)
+                        ? renderToStaticMarkup(node)
+                        : isNil(node)
+                          ? ''
+                          : String(node);
+                return {markup, width: getStringWidth(ctx, stripTags(markup))};
+            });
+
+        // 2) Measure only the widest sample's displayed width in the hidden probe.
+        const sample = takeRight(sortBy(estimates, 'width'), SIZE_CALC_SAMPLES);
+        let ret = 0;
+        sample.forEach(({markup}) => {
+            option.innerHTML = markup;
+            ret = Math.max(ret, Math.ceil(option.clientWidth));
+        });
+
+        // Option padding is already measured; pad only for the windowed scrollbar.
+        return ret ? ret + SCROLLBAR_PX : null;
+    } catch (e) {
+        // E.g. an optionRenderer that can't be statically rendered - fall back to control width.
+        logWarn(['Error calculating windowed menu width.', e], 'Select');
+        return null;
+    } finally {
+        portal.removeChild(menu);
+    }
+}
+
+//------------------
+// Canvas-based width estimation - mirrors grid's ColumnWidthCalculator.
+//------------------
+let _canvas: HTMLCanvasElement;
+function getCanvasContext(measureEl: HTMLElement): CanvasRenderingContext2D {
+    if (!_canvas) _canvas = document.createElement('canvas');
+
+    const ctx = _canvas.getContext('2d'),
+        style = window.getComputedStyle(measureEl),
+        fontSize = style.getPropertyValue('font-size'),
+        fontFamily = style.getPropertyValue('font-family');
+
+    ctx.font = `${fontSize} ${fontFamily}`;
+    return ctx;
+}
+
+function getStringWidth(ctx: CanvasRenderingContext2D, string: any): number {
+    return isString(string) ? ctx.measureText(string).width : 0;
+}

package/desktop/cmp/rest/impl/RestFormField.ts

@@ -68,7 +68,7 @@ function renderDefaultInput(name: string, model: RestFormModel) {
         case 'number':
             return numberInput();
         case 'json':
-            return jsonInput({enableSearch: true, height: 250});
+            return jsonInput({autoFormat: true, enableSearch: true, height: 250});
         case 'date':
             return dateInput();
         case 'localDate':