cx 26.0.1 → 26.0.2

package/build/widgets/form/LookupField.js

@@ -0,0 +1,907 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**@jsxImportSource react */
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Cx } from "../../ui/Cx";
+import { Field, getFieldTooltip } from "./Field";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { Binding } from "../../data/Binding";
+import { debug } from "../../util/Debug";
+import { Dropdown } from "../overlay/Dropdown";
+import { FocusManager } from "../../ui/FocusManager";
+import { isFocused } from "../../util/DOM";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { tooltipParentWillReceiveProps, tooltipParentWillUnmount, tooltipMouseMove, tooltipMouseLeave, tooltipParentDidMount, } from "../overlay/tooltip-ops";
+import { stopPropagation, preventDefault } from "../../util/eventCallbacks";
+import ClearIcon from "../icons/clear";
+import DropdownIcon from "../icons/drop-down";
+import { getSearchQueryPredicate } from "../../util/getSearchQueryPredicate";
+import { KeyCode } from "../../util/KeyCode";
+import { Localization } from "../../ui/Localization";
+import { StringTemplate } from "../../data/StringTemplate";
+import { isString } from "../../util/isString";
+import { isDefined } from "../../util/isDefined";
+import { isArray } from "../../util/isArray";
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { addEventListenerWithOptions } from "../../util/addEventListenerWithOptions";
+import { List } from "../List";
+import { Selection } from "../../ui/selection/Selection";
+import { HighlightedSearchText } from "../HighlightedSearchText";
+import { autoFocus } from "../autoFocus";
+import { bind } from "../../ui";
+import { isAccessorChain } from "../../data/createAccessorModelProxy";
+export class LookupField extends Field {
+    declareData(...args) {
+        let additionalAttributes = this.multiple
+            ? { values: undefined, records: undefined }
+            : { value: undefined, text: undefined };
+        super.declareData({
+            disabled: undefined,
+            enabled: undefined,
+            placeholder: undefined,
+            required: undefined,
+            options: undefined,
+            icon: undefined,
+            autoOpen: undefined,
+            readOnly: undefined,
+            filterParams: { structured: true },
+        }, additionalAttributes, ...args);
+    }
+    init() {
+        if (isDefined(this.hideClear))
+            this.showClear = !this.hideClear;
+        if (this.alwaysShowClear)
+            this.showClear = true;
+        if (!this.bindings) {
+            let b = [];
+            if (this.value) {
+                if (isAccessorChain(this.value))
+                    this.value = bind(this.value);
+                if (this.value.bind)
+                    b.push({
+                        key: true,
+                        local: this.value.bind,
+                        remote: `$option.${this.optionIdField}`,
+                        set: this.value.set,
+                    });
+            }
+            if (this.text) {
+                if (isAccessorChain(this.text))
+                    this.text = bind(this.text);
+                if (this.text.bind)
+                    b.push({
+                        local: this.text.bind,
+                        remote: `$option.${this.optionTextField}`,
+                        set: this.text.set,
+                    });
+            }
+            this.bindings = b;
+        }
+        if (this.bindings.length == 0 && this.multiple)
+            this.bindings = [
+                {
+                    key: true,
+                    local: `$value.${this.valueIdField}`,
+                    remote: `$option.${this.optionIdField}`,
+                },
+                {
+                    local: `$value.${this.valueTextField}`,
+                    remote: `$option.${this.optionTextField}`,
+                },
+            ];
+        this.keyBindings = this.bindings.filter((b) => b.key);
+        if (!this.items && !this.children)
+            this.items = {
+                type: HighlightedSearchText,
+                text: { bind: `$option.${this.optionTextField}` },
+                query: { bind: "$query" },
+            };
+        this.itemConfig = this.children || this.items;
+        this.items = [];
+        delete this.children;
+        super.init();
+    }
+    prepareData(context, instance) {
+        let { data, store } = instance;
+        data.stateMods = {
+            multiple: this.multiple,
+            single: !this.multiple,
+            disabled: data.disabled,
+            readonly: data.readOnly,
+        };
+        data.visibleOptions = data.options;
+        if (this.onCreateVisibleOptionsFilter && isArray(data.options)) {
+            let filterPredicate = instance.invoke("onCreateVisibleOptionsFilter", data.filterParams, instance);
+            data.visibleOptions = data.options.filter(filterPredicate);
+        }
+        data.selectedKeys = [];
+        if (this.multiple) {
+            if (isArray(data.values) && isArray(data.options)) {
+                data.selectedKeys = data.values.map((v) => (this.keyBindings.length == 1 ? [v] : v));
+                let map = {};
+                data.options.filter(($option) => {
+                    let optionKey = getOptionKey(this.keyBindings, { $option });
+                    for (let i = 0; i < data.selectedKeys.length; i++)
+                        if (areKeysEqual(optionKey, data.selectedKeys[i])) {
+                            map[i] = convertOption(this.bindings, { $option });
+                            break;
+                        }
+                });
+                data.records = [];
+                for (let i = 0; i < data.selectedKeys.length; i++)
+                    if (map[i])
+                        data.records.push(map[i]);
+            }
+            else if (isArray(data.records))
+                data.selectedKeys.push(...data.records.map(($value) => this.keyBindings.map((b) => Binding.get(b.local).value({ $value }))));
+        }
+        else {
+            let dataViewData = store.getData();
+            data.selectedKeys.push(this.keyBindings.map((b) => Binding.get(b.local).value(dataViewData)));
+            if (!this.text && isArray(data.options)) {
+                let option = data.options.find(($option) => areKeysEqual(getOptionKey(this.keyBindings, { $option }), data.selectedKeys[0]));
+                data.text = (option && option[this.optionTextField]) || "";
+            }
+        }
+        instance.lastDropdown = context.lastDropdown;
+        super.prepareData(context, instance);
+    }
+    renderInput(context, instance, key) {
+        return (_jsx(LookupComponent, { multiple: this.multiple, instance: instance, itemConfig: this.itemConfig, bindings: this.bindings, baseClass: this.baseClass, label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")), help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")), forceUpdate: context.forceUpdate, icon: this.renderIcon(context, instance, "icon") }, key));
+    }
+    filterOptions(instance, options, query) {
+        if (!query)
+            return options;
+        let textPredicate = getSearchQueryPredicate(query);
+        return options.filter((o) => isString(o[this.optionTextField]) && textPredicate(o[this.optionTextField]));
+    }
+    isEmpty(data) {
+        if (this.multiple)
+            return !isNonEmptyArray(data.values) && !isNonEmptyArray(data.records);
+        return super.isEmpty(data);
+    }
+    getValidationValue(data) {
+        if (this.multiple)
+            return data.records ?? data.values;
+        return super.getValidationValue(data);
+    }
+    formatValue(context, instance) {
+        if (!this.multiple)
+            return super.formatValue(context, instance);
+        let { records, values, options } = instance.data;
+        if (isArray(records)) {
+            let valueTextFormatter = typeof this.onGetRecordDisplayText === "function"
+                ? this.onGetRecordDisplayText
+                : (record) => record[this.valueTextField] || record[this.valueIdField];
+            return records.map((record) => valueTextFormatter(record, instance));
+        }
+        if (isArray(values)) {
+            if (isArray(options))
+                return values
+                    .map((id) => {
+                    let option = options.find((o) => o[this.optionIdField] == id);
+                    return option ? option[this.valueTextField] : id;
+                })
+                    .filter(Boolean)
+                    .join(", ");
+            return values.join(", ");
+        }
+        return null;
+    }
+}
+LookupField.prototype.baseClass = "lookupfield";
+//LookupField.prototype.memoize = false;
+LookupField.prototype.multiple = false;
+LookupField.prototype.queryDelay = 150;
+LookupField.prototype.minQueryLength = 0;
+LookupField.prototype.hideSearchField = false;
+LookupField.prototype.minOptionsForSearchField = 7;
+LookupField.prototype.loadingText = "Loading...";
+LookupField.prototype.queryErrorText = "Error occurred while querying for lookup data.";
+LookupField.prototype.noResultsText = "No results found.";
+LookupField.prototype.optionIdField = "id";
+LookupField.prototype.optionTextField = "text";
+LookupField.prototype.valueIdField = "id";
+LookupField.prototype.valueTextField = "text";
+LookupField.prototype.suppressErrorsUntilVisited = true;
+LookupField.prototype.fetchAll = false;
+LookupField.prototype.cacheAll = false;
+LookupField.prototype.showClear = true;
+LookupField.prototype.alwaysShowClear = false;
+LookupField.prototype.closeOnSelect = true;
+LookupField.prototype.minQueryLengthMessageText = "Type in at least {0} character(s).";
+LookupField.prototype.icon = null;
+LookupField.prototype.sort = false;
+LookupField.prototype.listOptions = null;
+LookupField.prototype.autoOpen = false;
+LookupField.prototype.submitOnEnterKey = false;
+LookupField.prototype.submitOnDropdownEnterKey = false;
+LookupField.prototype.pageSize = 100;
+LookupField.prototype.infinite = false;
+LookupField.prototype.quickSelectAll = false;
+LookupField.prototype.onGetRecordDisplayText = null;
+Localization.registerPrototype("cx/widgets/LookupField", LookupField);
+Widget.alias("lookupfield", LookupField);
+function getOptionKey(bindings, data) {
+    return bindings.filter((a) => a.key).map((b) => Binding.get(b.remote).value(data));
+}
+function areKeysEqual(key1, key2) {
+    if (!key1 || !key2 || key1.length != key2.length)
+        return false;
+    for (let i = 0; i < key1.length; i++)
+        if (key1[i] !== key2[i])
+            return false;
+    return true;
+}
+function convertOption(bindings, data) {
+    let result = { $value: {} };
+    bindings.forEach((b) => {
+        let value = Binding.get(b.remote).value(data);
+        result = Binding.get(b.local).set(result, value);
+    });
+    return result.$value;
+}
+class SelectionDelegate extends Selection {
+    delegate;
+    constructor({ delegate }) {
+        super();
+        this.delegate = delegate;
+    }
+    getIsSelectedDelegate(store) {
+        return (record, index) => this.delegate(record, index);
+    }
+    select() {
+        return false;
+    }
+}
+class LookupComponent extends VDOM.Component {
+    dom = {};
+    itemStore;
+    dropdown;
+    list;
+    listKeyDown;
+    queryTimeoutId;
+    cachedResult;
+    tmpCachedResult;
+    lastQueryId;
+    lastQuery;
+    extraPageLoadingBlocker;
+    unsubscribeListOnWheel;
+    unsubscribeListOnScroll;
+    constructor(props) {
+        super(props);
+        let { data, store } = this.props.instance;
+        this.dom = {};
+        this.state = {
+            options: [],
+            formatted: data.formatted,
+            value: data.formatted,
+            dropdownOpen: false,
+            focus: false,
+        };
+        this.itemStore = new ReadOnlyDataView({
+            store: store,
+        });
+    }
+    getOptionKey(data) {
+        return this.props.bindings.filter((a) => a.key).map((b) => Binding.get(b.remote).value(data));
+    }
+    getLocalKey(data) {
+        return this.props.bindings.filter((a) => a.key).map((b) => Binding.get(b.local).value(data));
+    }
+    findOption(options, key) {
+        if (!key)
+            return -1;
+        for (let i = 0; i < options.length; i++) {
+            let optionKey = this.getOptionKey({ $option: options[i] });
+            if (areKeysEqual(key, optionKey))
+                return i;
+        }
+        return -1;
+    }
+    getDropdown() {
+        if (this.dropdown)
+            return this.dropdown;
+        let { widget } = this.props.instance;
+        let { lastDropdown } = this.props.instance;
+        this.list = Widget.create({
+            type: List,
+            sortField: widget.sort && widget.optionTextField,
+            sortDirection: "ASC",
+            mod: "dropdown",
+            scrollSelectionIntoView: true,
+            cached: widget.infinite,
+            ...widget.listOptions,
+            records: bind("$options"),
+            recordName: "$option",
+            onItemClick: (e, inst) => this.onItemClick(e, inst),
+            pipeKeyDown: (kd) => {
+                this.listKeyDown = kd;
+            },
+            selectOnTab: true,
+            focusable: false,
+            selection: {
+                type: SelectionDelegate,
+                delegate: (data) => this.props.instance.data.selectedKeys.find((x) => areKeysEqual(x, this.getOptionKey({ $option: data }))) != null,
+            },
+            children: this.props.itemConfig,
+        });
+        let dropdown = {
+            constrain: true,
+            scrollTracking: true,
+            inline: !isTouchDevice() || !!lastDropdown,
+            placementOrder: "down-right down-left up-right up-left",
+            ...widget.dropdownOptions,
+            type: Dropdown,
+            relatedElement: this.dom.input,
+            renderChildren: () => this.renderDropdownContents(),
+            onFocusOut: (e) => this.closeDropdown(e),
+            memoize: false,
+            touchFriendly: isTouchDevice(),
+            onMeasureNaturalContentSize: () => {
+                if (this.dom.dropdown && this.dom.list) {
+                    return {
+                        height: this.dom.dropdown.offsetHeight -
+                            this.dom.list.offsetHeight +
+                            (this.dom.list.firstElementChild?.offsetHeight || 0),
+                    };
+                }
+            },
+            onDismissAfterScroll: () => {
+                this.closeDropdown(null, true);
+                return false;
+            },
+        };
+        return (this.dropdown = Widget.create(dropdown));
+    }
+    renderDropdownContents() {
+        let content;
+        let { instance } = this.props;
+        let { data, widget } = instance;
+        let { CSS, baseClass } = widget;
+        let searchVisible = !widget.hideSearchField &&
+            (!isArray(data.visibleOptions) ||
+                (widget.minOptionsForSearchField && data.visibleOptions.length >= widget.minOptionsForSearchField));
+        if (this.state.status == "loading") {
+            content = (_jsx("div", { className: CSS.element(baseClass, "message", "loading"), children: widget.loadingText }, "msg"));
+        }
+        else if (this.state.status == "error") {
+            content = (_jsx("div", { className: CSS.element(baseClass, "message", "error"), children: widget.queryErrorText }, "msg"));
+        }
+        else if (this.state.status == "info") {
+            content = (_jsx("div", { className: CSS.element(baseClass, "message", "info"), children: this.state.message }, "msg"));
+        }
+        else if (this.state.options.length == 0) {
+            content = (_jsx("div", { className: CSS.element(baseClass, "message", "no-results"), children: widget.noResultsText }, "msg"));
+        }
+        else {
+            content = (_jsx("div", { ref: (el) => {
+                    this.dom.list = el;
+                    this.subscribeListOnWheel(el);
+                    this.subscribeListOnScroll(el);
+                }, className: CSS.element(baseClass, "scroll-container"), children: _jsx(Cx, { widget: this.list, store: this.itemStore, options: { name: "lookupfield-list" } }) }, "msg"));
+        }
+        return (_jsxs("div", { ref: (el) => {
+                this.dom.dropdown = el;
+            }, className: CSS.element(baseClass, "dropdown"), tabIndex: 0, onFocus: (e) => this.onDropdownFocus(e), onKeyDown: (e) => this.onDropdownKeyPress(e), children: [searchVisible && (_jsx("input", { ref: (el) => {
+                        this.dom.query = el;
+                    }, type: "text", className: CSS.element(baseClass, "query"), onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }, onChange: (e) => this.query(e.target.value), onBlur: (e) => this.onQueryBlur(e) }, "query")), content] }, "dropdown"));
+    }
+    onListWheel(e) {
+        let { list } = this.dom;
+        if (list &&
+            ((list.scrollTop + list.offsetHeight == list.scrollHeight && e.deltaY > 0) ||
+                (list.scrollTop == 0 && e.deltaY < 0))) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+    onListScroll() {
+        if (!this.dom.list)
+            return;
+        var el = this.dom.list;
+        if (el.scrollTop > el.scrollHeight - 2 * el.offsetHeight) {
+            this.loadAdditionalOptionPages();
+        }
+    }
+    onDropdownFocus(e) {
+        if (this.dom.query && !isFocused(this.dom.query) && !isTouchDevice())
+            FocusManager.focus(this.dom.query);
+    }
+    getPlaceholder(text) {
+        let { CSS, baseClass } = this.props.instance.widget;
+        if (text)
+            return _jsx("span", { className: CSS.element(baseClass, "placeholder"), children: text });
+        return _jsx("span", { className: CSS.element(baseClass, "placeholder"), children: "\u00A0" });
+    }
+    render() {
+        let { instance, label, help, icon: iconVDOM } = this.props;
+        let { data, widget, state } = instance;
+        let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+        let icon = iconVDOM && (_jsx("div", { className: CSS.element(baseClass, "left-icon"), onMouseDown: preventDefault, onClick: (e) => {
+                this.openDropdown(e);
+                e.stopPropagation();
+                e.preventDefault();
+            }, children: iconVDOM }, "icon"));
+        let dropdown;
+        if (this.state.dropdownOpen) {
+            this.itemStore.setData({
+                $options: this.state.options,
+                $query: this.lastQuery,
+            });
+            dropdown = (_jsx(Cx, { widget: this.getDropdown(), store: this.itemStore, options: { name: "lookupfield-dropdown" } }));
+        }
+        let insideButton = null;
+        let multipleEntries = this.props.multiple && isArray(data.records) && data.records.length > 1;
+        if (!data.readOnly) {
+            if (widget.showClear &&
+                !data.disabled &&
+                !data.empty &&
+                (widget.alwaysShowClear || (!data.required && !this.props.multiple) || multipleEntries)) {
+                insideButton = (_jsx("div", { onMouseDown: preventDefault, onClick: (e) => (!this.props.multiple ? this.onClearClick(e) : this.onClearMultipleClick(e)), className: CSS.element(baseClass, "clear"), children: _jsx(ClearIcon, { className: CSS.element(baseClass, "icon") }) }, "ib"));
+            }
+            else {
+                insideButton = (_jsx("div", { className: CSS.element(baseClass, "tool"), onMouseDown: preventDefault, onClick: (e) => {
+                        this.toggleDropdown(e, true);
+                        e.stopPropagation();
+                        e.preventDefault();
+                    }, children: _jsx(DropdownIcon, { className: CSS.element(baseClass, "icon") }) }, "ib"));
+            }
+        }
+        let text;
+        if (this.props.multiple) {
+            let readOnly = data.disabled || data.readOnly;
+            if (isNonEmptyArray(data.records)) {
+                let valueTextFormatter = widget.onGetRecordDisplayText ??
+                    ((record) => record[widget.valueTextField]);
+                text = data.records.map((v, i) => (_jsxs("div", { className: CSS.element(baseClass, "tag", {
+                        readonly: readOnly,
+                    }), children: [_jsx("span", { className: CSS.element(baseClass, "tag-value"), children: valueTextFormatter(v, instance) }), !readOnly && (_jsx("div", { className: CSS.element(baseClass, "tag-clear"), onMouseDown: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }, onClick: (e) => this.onClearClick(e, v), children: _jsx(ClearIcon, { className: CSS.element(baseClass, "icon") }) }))] }, i)));
+            }
+            else {
+                text = this.getPlaceholder(data.placeholder);
+            }
+        }
+        else {
+            text = !data.empty ? data.text || this.getPlaceholder() : this.getPlaceholder(data.placeholder);
+        }
+        let states = {
+            visited: state.visited,
+            focus: this.state.focus || this.state.dropdownOpen,
+            icon: !!iconVDOM,
+            empty: !data.placeholder && data.empty,
+            error: data.error && (state.visited || !suppressErrorsUntilVisited || !data.empty),
+        };
+        return (_jsxs("div", { className: CSS.expand(data.classNames, CSS.state(states)), style: data.style, onMouseDown: stopPropagation, onTouchStart: stopPropagation, onKeyDown: (e) => this.onKeyDown(e), children: [_jsx("div", { id: data.id, className: CSS.expand(CSS.element(widget.baseClass, "input"), data.inputClass), style: data.inputStyle, tabIndex: data.disabled ? null : data.tabIndex || 0, ref: (el) => {
+                        this.dom.input = el;
+                    }, "aria-labelledby": data.id + "-label", onMouseMove: (e) => tooltipMouseMove(e, ...getFieldTooltip(this.props.instance)), onMouseLeave: (e) => tooltipMouseLeave(e, ...getFieldTooltip(this.props.instance)), onClick: (e) => this.onClick(e), onKeyDown: (e) => this.onInputKeyDown(e), onMouseDown: (e) => this.onMouseDown(e), onBlur: (e) => this.onBlur(e), onFocus: (e) => this.onFocus(e), children: text }), insideButton, icon, dropdown, label, help] }));
+    }
+    onMouseDown(e) {
+        //skip touch start to allow touch scrolling
+        if (isTouchEvent())
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleDropdown(e, true);
+    }
+    onClick(e) {
+        //mouse down will handle it for non-touch events
+        if (!isTouchEvent())
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleDropdown(e, true);
+    }
+    onItemClick(e, { store }) {
+        this.select(e, [store.getData()]);
+        if (!this.props.instance.widget.submitOnEnterKey || e.type != "keydown")
+            e.stopPropagation();
+        if (e.keyCode != KeyCode.tab)
+            e.preventDefault();
+    }
+    onClearClick(e, value) {
+        let { instance } = this.props;
+        let { data, store, widget } = instance;
+        let { keyBindings } = widget;
+        e.stopPropagation();
+        e.preventDefault();
+        if (widget.multiple) {
+            if (isArray(data.records)) {
+                let itemKey = this.getLocalKey({ $value: value });
+                let newRecords = data.records.filter((v) => !areKeysEqual(this.getLocalKey({ $value: v }), itemKey));
+                instance.set("records", newRecords);
+                let newValues = newRecords
+                    .map((rec) => this.getLocalKey({ $value: rec }))
+                    .map((k) => (keyBindings.length == 1 ? k[0] : k));
+                instance.set("values", newValues);
+            }
+        }
+        else {
+            this.props.bindings.forEach((b) => {
+                store.set(b.local, widget.emptyValue);
+            });
+        }
+        if (!isTouchEvent())
+            this.dom.input.focus();
+    }
+    onClearMultipleClick(e) {
+        let { instance } = this.props;
+        instance.set("records", []);
+        instance.set("values", []);
+    }
+    select(e, itemsData, reset) {
+        let { instance } = this.props;
+        let { store, data, widget } = instance;
+        let { bindings, keyBindings } = widget;
+        if (widget.multiple) {
+            let { selectedKeys, records } = data;
+            let newRecords = reset ? [] : [...(records || [])];
+            let singleSelect = itemsData.length == 1;
+            let optionKey = null;
+            if (singleSelect)
+                optionKey = this.getOptionKey(itemsData[0]);
+            // deselect
+            if (singleSelect && selectedKeys.find((k) => areKeysEqual(optionKey, k))) {
+                newRecords = records.filter((v) => !areKeysEqual(optionKey, this.getLocalKey({ $value: v })));
+            }
+            else {
+                itemsData.forEach((itemData) => {
+                    let valueData = {
+                        $value: {},
+                    };
+                    bindings.forEach((b) => {
+                        valueData = Binding.get(b.local).set(valueData, Binding.get(b.remote).value(itemData));
+                    });
+                    newRecords.push(valueData.$value);
+                });
+            }
+            instance.set("records", newRecords);
+            let newValues = newRecords
+                .map((rec) => this.getLocalKey({ $value: rec }))
+                .map((k) => (keyBindings.length == 1 ? k[0] : k));
+            instance.set("values", newValues);
+        }
+        else {
+            bindings.forEach((b) => {
+                let v = Binding.get(b.remote).value(itemsData[0]);
+                if (b.set)
+                    b.set(v, instance);
+                else
+                    store.set(b.local, v);
+            });
+        }
+        if (widget.closeOnSelect) {
+            //Pressing Tab should work it's own thing. Focus will move elsewhere and the dropdown will close.
+            if (e.keyCode != KeyCode.tab) {
+                if (!isTouchEvent())
+                    this.dom.input.focus();
+                this.closeDropdown(e);
+            }
+        }
+        if (e.keyCode == KeyCode.enter && widget.submitOnDropdownEnterKey) {
+            this.submitOnEnter(e);
+        }
+    }
+    onDropdownKeyPress(e) {
+        switch (e.keyCode) {
+            case KeyCode.esc:
+                this.closeDropdown(e);
+                this.dom.input.focus();
+                break;
+            case KeyCode.tab:
+                // if tab needs to do a list selection, we have to first call List's handleKeyDown
+                if (this.listKeyDown)
+                    this.listKeyDown(e);
+                // if next focusable element is disabled, recalculate and update the dom before switching focus
+                this.props.forceUpdate();
+                break;
+            case KeyCode.a:
+                if (!e.ctrlKey)
+                    return;
+                let { quickSelectAll, multiple } = this.props.instance.widget;
+                if (!quickSelectAll || !multiple)
+                    return;
+                let optionsToSelect = this.state.options.map((o) => ({
+                    $option: o,
+                }));
+                this.select(e, optionsToSelect, true);
+                e.stopPropagation();
+                e.preventDefault();
+                break;
+            default:
+                if (this.listKeyDown)
+                    this.listKeyDown(e);
+                break;
+        }
+    }
+    onKeyDown(e) {
+        switch (e.keyCode) {
+            case KeyCode.pageDown:
+            case KeyCode.pageUp:
+                if (this.state.dropdownOpen)
+                    e.preventDefault();
+                break;
+        }
+    }
+    onInputKeyDown(e) {
+        let { instance } = this.props;
+        if (instance.widget.handleKeyDown(e, instance) === false)
+            return;
+        switch (e.keyCode) {
+            case KeyCode.delete:
+                this.onClearClick(e);
+                return;
+            case KeyCode.shift:
+            case KeyCode.ctrl:
+            case KeyCode.tab:
+            case KeyCode.left:
+            case KeyCode.right:
+            case KeyCode.pageUp:
+            case KeyCode.pageDown:
+            case KeyCode.insert:
+            case KeyCode.esc:
+                break;
+            case KeyCode.down:
+                this.openDropdown(e);
+                e.stopPropagation();
+                break;
+            case KeyCode.enter:
+                if (this.props.instance.widget.submitOnEnterKey) {
+                    this.submitOnEnter(e);
+                }
+                else {
+                    this.openDropdown(e);
+                }
+                break;
+            default:
+                this.openDropdown(e);
+                break;
+        }
+    }
+    onQueryBlur(e) {
+        FocusManager.nudge();
+    }
+    onFocus(e) {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (widget.trackFocus) {
+            this.setState({
+                focus: true,
+            });
+        }
+        if (this.props.instance.data.autoOpen)
+            this.openDropdown(null);
+    }
+    onBlur(e) {
+        if (!this.state.dropdownOpen)
+            this.props.instance.setState({ visited: true });
+        if (this.state.focus)
+            this.setState({
+                focus: false,
+            });
+    }
+    toggleDropdown(e, keepFocus) {
+        if (this.state.dropdownOpen)
+            this.closeDropdown(e, keepFocus);
+        else
+            this.openDropdown(e);
+    }
+    closeDropdown(e, keepFocus) {
+        if (this.state.dropdownOpen) {
+            this.setState({
+                dropdownOpen: false,
+            }, () => keepFocus && this.dom.input?.focus());
+            this.props.instance.setState({
+                visited: true,
+            });
+        }
+        //delete results valid only while the dropdown is open
+        delete this.tmpCachedResult;
+    }
+    openDropdown(e) {
+        let { instance } = this.props;
+        let { data } = instance;
+        if (!this.state.dropdownOpen && !data.disabled && !data.readOnly) {
+            this.query("");
+            this.setState({
+                dropdownOpen: true,
+            }, () => {
+                if (this.dom.dropdown)
+                    this.dom.dropdown.focus();
+            });
+        }
+    }
+    query(q) {
+        /*
+         In fetchAll mode onQuery should fetch all data and after
+         that everything is done filtering is done client-side.
+         If cacheAll is set results are cached for the lifetime of the
+         widget, otherwise cache is invalidated when dropdown closes.
+         */
+        let { instance } = this.props;
+        let { widget, data } = instance;
+        this.lastQuery = q;
+        //do not make duplicate queries if fetchAll is enabled
+        if (widget.fetchAll && this.state.status == "loading")
+            return;
+        if (this.queryTimeoutId)
+            clearTimeout(this.queryTimeoutId);
+        if (q.length < widget.minQueryLength) {
+            this.setState({
+                status: "info",
+                message: StringTemplate.format(widget.minQueryLengthMessageText, widget.minQueryLength),
+            });
+            return;
+        }
+        if (isArray(data.visibleOptions)) {
+            let results = widget.filterOptions(this.props.instance, data.visibleOptions, q);
+            this.setState({
+                options: results,
+                status: "loaded",
+            });
+        }
+        if (widget.onQuery) {
+            let { queryDelay, fetchAll, cacheAll, pageSize } = widget;
+            if (fetchAll)
+                queryDelay = 0;
+            if (!this.cachedResult) {
+                this.setState({
+                    status: "loading",
+                });
+            }
+            this.queryTimeoutId = setTimeout(() => {
+                delete this.queryTimeoutId;
+                let result = this.tmpCachedResult || this.cachedResult;
+                let query = fetchAll ? "" : q;
+                let params = !widget.infinite
+                    ? query
+                    : {
+                        query,
+                        page: 1,
+                        pageSize,
+                    };
+                if (!result)
+                    result = instance.invoke("onQuery", params, instance);
+                let queryId = (this.lastQueryId = Date.now());
+                Promise.resolve(result)
+                    .then((results) => {
+                    //discard results which do not belong to the last query
+                    if (queryId !== this.lastQueryId)
+                        return;
+                    if (!isArray(results))
+                        results = [];
+                    if (fetchAll) {
+                        if (cacheAll)
+                            this.cachedResult = results;
+                        else
+                            this.tmpCachedResult = results;
+                        results = widget.filterOptions(this.props.instance, results, this.lastQuery);
+                    }
+                    this.setState({
+                        page: 1,
+                        query,
+                        options: results,
+                        status: "loaded",
+                    }, () => {
+                        if (widget.infinite)
+                            this.onListScroll();
+                    });
+                })
+                    .catch((err) => {
+                    this.setState({ status: "error" });
+                    debug("Lookup query error:", err);
+                });
+            }, queryDelay);
+        }
+    }
+    loadAdditionalOptionPages() {
+        let { instance } = this.props;
+        let { widget } = instance;
+        if (!widget.infinite)
+            return;
+        let { query, page, status, options } = this.state;
+        if (!page)
+            page = 1;
+        let blockerKey = query;
+        if (status != "loaded")
+            return;
+        if (options.length < page * widget.pageSize)
+            return; //some pages were not full which means we reached the end
+        if (this.extraPageLoadingBlocker === blockerKey)
+            return;
+        this.extraPageLoadingBlocker = blockerKey;
+        let params = {
+            page: page + 1,
+            query,
+            pageSize: widget.pageSize,
+        };
+        var result = instance.invoke("onQuery", params, instance);
+        Promise.resolve(result)
+            .then((results) => {
+            //discard results which do not belong to the last query
+            if (this.extraPageLoadingBlocker !== blockerKey)
+                return;
+            this.extraPageLoadingBlocker = false;
+            if (!isArray(results))
+                return;
+            this.setState({
+                page: params.page,
+                query,
+                options: [...options, ...results],
+            }, () => {
+                this.onListScroll();
+            });
+        })
+            .catch((err) => {
+            if (this.extraPageLoadingBlocker !== blockerKey)
+                return;
+            this.extraPageLoadingBlocker = false;
+            this.setState({ status: "error" });
+            debug("Lookup query error:", err);
+            console.error(err);
+        });
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        if (this.dom.input) {
+            tooltipParentWillReceiveProps(this.dom.input, ...getFieldTooltip(props.instance));
+        }
+    }
+    componentDidMount() {
+        if (this.dom.input) {
+            tooltipParentDidMount(this.dom.input, ...getFieldTooltip(this.props.instance));
+            autoFocus(this.dom.input, this);
+        }
+    }
+    componentDidUpdate() {
+        if (this.dom.input) {
+            autoFocus(this.dom.input, this);
+        }
+    }
+    componentWillUnmount() {
+        if (this.queryTimeoutId)
+            clearTimeout(this.queryTimeoutId);
+        tooltipParentWillUnmount(this.props.instance);
+        this.subscribeListOnWheel(null);
+    }
+    subscribeListOnWheel(list) {
+        if (this.unsubscribeListOnWheel) {
+            this.unsubscribeListOnWheel();
+            this.unsubscribeListOnWheel = null;
+        }
+        if (list) {
+            this.unsubscribeListOnWheel = addEventListenerWithOptions(list, "wheel", (e) => this.onListWheel(e), {
+                passive: false,
+            });
+        }
+    }
+    subscribeListOnScroll(list) {
+        if (this.unsubscribeListOnScroll) {
+            this.unsubscribeListOnScroll();
+            this.unsubscribeListOnScroll = null;
+        }
+        if (list) {
+            this.unsubscribeListOnScroll = addEventListenerWithOptions(list, "scroll", () => this.onListScroll(), {
+                passive: false,
+            });
+        }
+    }
+    submitOnEnter(e) {
+        let instance = this.props.instance.parent;
+        while (instance) {
+            let htmlInstance = instance;
+            if (htmlInstance.events && htmlInstance.events.onSubmit) {
+                htmlInstance.events.onSubmit(e, instance);
+                break;
+            }
+            else {
+                instance = instance.parent;
+            }
+        }
+    }
+}