@xh/hoist 86.1.0 → 86.3.0

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

@@ -5,12 +5,18 @@
  * Copyright © 2026 Extremely Heavy Industries Inc.
  */
 import {HoistModel, XH} from '@xh/hoist/core';
-import {CompoundFilterOperator, FilterLike} from '@xh/hoist/data';
+import {
+    CompoundFilterOperator,
+    FieldFilter,
+    FieldFilterOperator,
+    FieldFilterSpec,
+    FilterLike
+} from '@xh/hoist/data';
 import {action, bindable, computed, makeObservable, observable} from '@xh/hoist/mobx';
-import {compact, isEmpty} from 'lodash';
+import {compact, first, flatMap, forEach, groupBy, isArray, isEmpty, uniq} from 'lodash';
 import {HeaderFilterModel} from '../HeaderFilterModel';
 
-import {CustomRowModel} from './CustomRowModel';
+import {CustomRowModel, usesMultiValueInput} from './CustomRowModel';
 
 export class CustomTabModel extends HoistModel {
     override xhImpl = true;
@@ -23,11 +29,16 @@ export class CustomTabModel extends HoistModel {
     /** Filter config output by this model. */
     @computed.struct
     get filter(): FilterLike {
-        const {op, rowModels} = this,
-            filters = compact(rowModels.map(it => it.value));
-        if (isEmpty(filters)) return null;
-        if (filters.length > 1) return {filters, op};
-        return filters;
+        const {op, rowModels} = this;
+
+        // Null rowModels flags an unrepresentable filter - emit it unchanged so commit is a no-op.
+        if (!rowModels) return this.columnCompoundFilter ?? this.columnFilters;
+
+        const specs = compact(rowModels.map(it => it.value));
+        if (isEmpty(specs)) return null;
+
+        const filters = this.collapseToArrayFilters(specs, op);
+        return filters.length > 1 ? {filters, op} : first(filters);
     }
 
     get fieldSpec() {
@@ -42,6 +53,10 @@ export class CustomTabModel extends HoistModel {
         return this.headerFilterModel.columnFilters;
     }
 
+    get columnCompoundFilter() {
+        return this.headerFilterModel.columnCompoundFilter;
+    }
+
     constructor(headerFilterModel: HeaderFilterModel) {
         super();
         makeObservable(this);
@@ -74,13 +89,27 @@ export class CustomTabModel extends HoistModel {
     //-------------------
     @action
     private doSyncWithFilter() {
-        const {columnFilters} = this,
-            rowModels = [];
+        const {columnCompoundFilter} = this,
+            op = this.deriveOp();
+        this.op = op;
+
+        if (!this.isRepresentable) {
+            this.logWarn('Filter cannot be edited in the custom tab; leaving it unchanged');
+            this.rowModels = null;
+            return;
+        }
 
-        // Create rows based on filter.
-        columnFilters.forEach(filter => {
-            const {op, value} = filter;
-            rowModels.push(new CustomRowModel(this, op, value));
+        // Expand a multi-value clause destined for a single-value input into one row per value
+        // (joined under the tab op); the multi-select input holds the array directly as one row.
+        const rowModels = [],
+            children = (columnCompoundFilter?.filters ?? this.columnFilters) as FieldFilter[];
+        children.forEach(filter => {
+            const {op: fieldOp, value} = filter;
+            if (this.needsExpansion(filter)) {
+                value.forEach(v => rowModels.push(new CustomRowModel(this, fieldOp, v)));
+            } else {
+                rowModels.push(new CustomRowModel(this, fieldOp, value));
+            }
         });
 
         // Add an empty pending row
@@ -90,4 +119,58 @@ export class CustomTabModel extends HoistModel {
 
         this.rowModels = rowModels;
     }
+
+    // Whether a multi-value clause must be expanded to one row per value (vs held by a multi-select).
+    private needsExpansion({op, value}: FieldFilter): boolean {
+        return isArray(value) && value.length > 1 && !usesMultiValueInput(this.fieldSpec, op);
+    }
+
+    // The op a multi-value clause joins under: `=`-family => OR, negated => AND.
+    private mergeOpFor(op: FieldFilterOperator): CompoundFilterOperator {
+        return FieldFilter.INCLUDE_LIKE_OPERATORS.includes(op) ? 'OR' : 'AND';
+    }
+
+    // Op joining the tab's rows
+    private deriveOp(): CompoundFilterOperator {
+        const {columnCompoundFilter, columnFilters} = this;
+        if (columnCompoundFilter) return columnCompoundFilter.op;
+
+        const arrayFilter = columnFilters.find(f => this.needsExpansion(f));
+        return arrayFilter ? this.mergeOpFor(arrayFilter.op) : 'AND';
+    }
+
+    // Filter must be representable as a flat set of rows with a single op
+    private get isRepresentable(): boolean {
+        const {columnCompoundFilter} = this,
+            op = this.deriveOp(),
+            children = columnCompoundFilter?.filters ?? this.columnFilters;
+        return children.every(
+            f =>
+                FieldFilter.isFieldFilter(f) &&
+                (!this.needsExpansion(f) || op === this.mergeOpFor(f.op))
+        );
+    }
+
+    // Inverse of the expand in `doSyncWithFilter`: collapse same-field/op rows into one multi-value FieldFilter
+    private collapseToArrayFilters(
+        specs: FieldFilterSpec[],
+        op: CompoundFilterOperator
+    ): FieldFilterSpec[] {
+        const ret: FieldFilterSpec[] = [];
+        forEach(groupBy(specs, 'op'), (groupSpecs, groupOp: FieldFilterOperator) => {
+            const canMerge =
+                groupSpecs.length > 1 &&
+                FieldFilter.ARRAY_OPERATORS.includes(groupOp) &&
+                op === this.mergeOpFor(groupOp);
+
+            if (canMerge) {
+                const {field} = groupSpecs[0],
+                    value = uniq(flatMap(groupSpecs, it => it.value));
+                ret.push({field, op: groupOp, value});
+            } else {
+                ret.push(...groupSpecs);
+            }
+        });
+        return ret;
+    }
 }

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/SegmentedControl.ts

@@ -80,6 +80,7 @@ export const [SegmentedControl, segmentedControl] = hoistCmp.withFactory<Segment
 interface NormalizedOption extends SegmentedControlOption {
     label: string;
     intent?: Intent;
+    testId?: string;
     _key: string;
 }
 
@@ -92,13 +93,14 @@ class SegmentedControlModel extends HoistInputModel {
         return options.map((o: any, idx: number) => {
             const key = String(idx);
             if (isObject(o)) {
-                const {label, value, icon, disabled, intent} = o as SegmentedControlOption;
+                const {label, value, icon, disabled, intent, testId} = o as SegmentedControlOption;
                 return {
                     value: this.toInternal(value),
                     label: label ?? (icon ? '' : String(value)),
                     icon,
                     disabled,
                     intent,
+                    testId,
                     _key: key
                 };
             } else {
@@ -163,13 +165,15 @@ const cmp = hoistCmp.factory<SegmentedControlModel>(({model, className, ...props
     // applied via a per-button className that our SCSS keys its solid/hint coloring off of.
     const defaultIntent = intent && intent !== 'none' ? intent : null,
         bpOptions = model.normalizedOptions.map(opt => {
-            const optIntent = opt.intent ?? defaultIntent;
+            const optIntent = opt.intent ?? defaultIntent,
+                optTestId = opt.testId ?? (testId ? `${testId}-${String(opt.value)}` : null);
             return {
                 value: opt._key,
                 label: opt.label,
                 icon: opt.icon,
                 disabled: opt.disabled,
-                className: optIntent ? `xh-segmented-control-option--${optIntent}` : null
+                className: optIntent ? `xh-segmented-control-option--${optIntent}` : null,
+                ...(optTestId ? {[TEST_ID]: optTestId} : null)
             };
         });
 

package/desktop/cmp/input/Select.ts

@@ -31,9 +31,10 @@ import {debouncePromise, wait} from '@xh/hoist/promise';
 import {elemWithin, getTestId, mergeDeep, TEST_ID, throwIf, withDefault} from '@xh/hoist/utils/js';
 import {createObservableRef, getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {castArray, escapeRegExp, isEmpty, isEqual, isNil, isPlainObject, keyBy} from 'lodash';
+import {castArray, escapeRegExp, isEmpty, isEqual, isNil, isPlainObject, unionWith} 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';
@@ -190,6 +191,15 @@ export interface SelectProps extends HoistProps, HoistInputProps, LayoutProps {
 
     /** Field on provided options for sourcing each option's value (default `value`). */
     valueField?: string;
+
+    /**
+     * Function to generate a `SelectOption` for a (non-null) selected value not present in the
+     * current options list. Return null to fall back to the default value-as-label behavior.
+     *
+     * Useful with queryFn-based selects, readonly forms, or any case where options may not be
+     * loaded when a value is set, ensuring the value renders with its proper label.
+     */
+    generateOptionFn?: (value: any) => SelectOption;
 }
 
 /**
@@ -224,6 +234,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 +302,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
         });
@@ -427,7 +446,8 @@ class SelectInputModel extends HoistInputModel {
 
     // Convert external value into option object(s). Options created if missing - this takes the
     // external value from the model, and we will respect that even if we don't know about it.
-    // (Exception for a null value, which we will only accept if explicitly present in options.)
+    // (Exception for a null value, which is never synthesized - accepted only if provided via
+    // options.)
     override toInternal(external) {
         if (this.multiMode) {
             if (external == null || isEqual(external, this.emptyValue)) external = []; // avoid [null]
@@ -447,7 +467,10 @@ class SelectInputModel extends HoistInputModel {
             }
         }
 
-        return createIfNotFound ? this.valueToOption(value) : null;
+        if (!createIfNotFound) return null;
+
+        // Value not among options - let the app generate an option for it, else synthesize one.
+        return this.componentProps.generateOptionFn?.(value) ?? this.valueToOption(value);
     }
 
     override toExternal(internal) {
@@ -471,11 +494,11 @@ class SelectInputModel extends HoistInputModel {
     // Normalize / clone a single source value into a normalized option object. Supports Strings
     // and Objects. Objects are validated/defaulted to ensure a label+value or label+options sublist,
     // with other fields brought along to support Selects emitting value objects with ad hoc properties.
-    private toOption(src, depth) {
+    private toOption(src, depth): SelectOption {
         return isPlainObject(src) ? this.objectToOption(src, depth) : this.valueToOption(src);
     }
 
-    private objectToOption(src, depth) {
+    private objectToOption(src, depth): SelectOption {
         const {componentProps} = this,
             labelField = withDefault(componentProps.labelField, 'label'),
             valueField = withDefault(componentProps.valueField, 'value');
@@ -498,7 +521,7 @@ class SelectInputModel extends HoistInputModel {
               };
     }
 
-    private valueToOption(src) {
+    private valueToOption(src): SelectOption {
         return {label: src != null ? src.toString() : '-null-', value: src};
     }
 
@@ -511,13 +534,9 @@ class SelectInputModel extends HoistInputModel {
 
         // Carry forward and add to any existing internalOpts to allow our value
         // converters to continue all selected values in multiMode.
-        const matchesByVal = keyBy(matchOpts, 'value'),
-            newOpts = [...matchOpts];
-        this.internalOptions.forEach(currOpt => {
-            const matchOpt = matchesByVal[currOpt.value];
-            if (!matchOpt) newOpts.push(currOpt); // avoiding dupes
-        });
-        this.internalOptions = newOpts;
+        this.internalOptions = unionWith(matchOpts, this.internalOptions, (a, b) =>
+            isEqual(a.value, b.value)
+        );
 
         // But only return the matching options back to the combo.
         return matchOpts;
@@ -534,8 +553,7 @@ class SelectInputModel extends HoistInputModel {
     // Option Rendering
     //----------------------
     formatOptionLabel = (opt, params) => {
-        // Always display the standard label string in the value container (context == 'value').
-        // If we need to expose customization here, we could consider a dedicated prop.
+        // Display the standard label string in the value container (context == 'value').
         if (params.context !== 'menu') {
             return opt.label;
         }
@@ -551,7 +569,7 @@ class SelectInputModel extends HoistInputModel {
             return div(opt.label);
         }
 
-        return castArray(this.externalValue).includes(opt.value)
+        return castArray(this.externalValue).some(v => isEqual(v, opt.value))
             ? hbox({
                   items: [
                       div({
@@ -780,9 +798,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':