cx 25.10.1 → 26.0.1

package/src/widgets/form/LookupField.js

@@ -1,1135 +0,0 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Cx } from "../../ui/Cx";
-import { Field, getFieldTooltip } from "./Field";
-import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { HtmlElement } from "../HtmlElement";
-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 { Icon } from "../Icon";
-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() {
-      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,
-         ...arguments,
-      );
-   }
-
-   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;
-
-      delete 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 (
-         <LookupComponent
-            key={key}
-            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")}
-         />
-      );
-   }
-
-   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 =
-            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 {
-   constructor({ delegate }) {
-      super();
-      this.delegate = delegate;
-   }
-
-   getIsSelectedDelegate(store) {
-      return (record, index) => this.delegate(record, index);
-   }
-
-   select() {
-      return false;
-   }
-}
-
-class LookupComponent extends VDOM.Component {
-   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, lastDropdown } = this.props.instance;
-
-      this.list = Widget.create(
-         <cx>
-            <List
-               sortField={widget.sort && widget.optionTextField}
-               sortDirection="ASC"
-               mod="dropdown"
-               scrollSelectionIntoView
-               cached={widget.infinite}
-               {...widget.listOptions}
-               records-bind="$options"
-               recordName="$option"
-               onItemClick={(e, inst) => this.onItemClick(e, inst)}
-               pipeKeyDown={(kd) => {
-                  this.listKeyDown = kd;
-               }}
-               selectOnTab
-               focusable={false}
-               selection={{
-                  type: SelectionDelegate,
-                  delegate: (data) =>
-                     this.props.instance.data.selectedKeys.find((x) =>
-                        areKeysEqual(x, this.getOptionKey({ $option: data })),
-                     ) != null,
-               }}
-            >
-               {this.props.itemConfig}
-            </List>
-         </cx>,
-      );
-
-      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 = (
-            <div key="msg" className={CSS.element(baseClass, "message", "loading")}>
-               {widget.loadingText}
-            </div>
-         );
-      } else if (this.state.status == "error") {
-         content = (
-            <div key="msg" className={CSS.element(baseClass, "message", "error")}>
-               {widget.queryErrorText}
-            </div>
-         );
-      } else if (this.state.status == "info") {
-         content = (
-            <div key="msg" className={CSS.element(baseClass, "message", "info")}>
-               {this.state.message}
-            </div>
-         );
-      } else if (this.state.options.length == 0) {
-         content = (
-            <div key="msg" className={CSS.element(baseClass, "message", "no-results")}>
-               {widget.noResultsText}
-            </div>
-         );
-      } else {
-         content = (
-            <div
-               key="msg"
-               ref={(el) => {
-                  this.dom.list = el;
-                  this.subscribeListOnWheel(el);
-                  this.subscribeListOnScroll(el);
-               }}
-               className={CSS.element(baseClass, "scroll-container")}
-            >
-               <Cx widget={this.list} store={this.itemStore} options={{ name: "lookupfield-list" }} />
-            </div>
-         );
-      }
-
-      return (
-         <div
-            key="dropdown"
-            ref={(el) => {
-               this.dom.dropdown = el;
-            }}
-            className={CSS.element(baseClass, "dropdown")}
-            tabIndex={0}
-            onFocus={(e) => this.onDropdownFocus(e)}
-            onKeyDown={(e) => this.onDropdownKeyPress(e)}
-         >
-            {searchVisible && (
-               <input
-                  key="query"
-                  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)}
-               />
-            )}
-            {content}
-         </div>
-      );
-   }
-
-   onListWheel(e) {
-      let { list } = this.dom;
-      if (
-         (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 <span className={CSS.element(baseClass, "placeholder")}>{text}</span>;
-
-      return <span className={CSS.element(baseClass, "placeholder")}>&nbsp;</span>;
-   }
-
-   render() {
-      let { instance, label, help, icon: iconVDOM } = this.props;
-      let { data, widget, state } = instance;
-      let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
-
-      let icon = iconVDOM && (
-         <div
-            key="icon"
-            className={CSS.element(baseClass, "left-icon")}
-            onMouseDown={preventDefault}
-            onClick={(e) => {
-               this.openDropdown(e);
-               e.stopPropagation();
-               e.preventDefault();
-            }}
-         >
-            {iconVDOM}
-         </div>
-      );
-
-      let dropdown;
-      if (this.state.dropdownOpen) {
-         this.itemStore.setData({
-            $options: this.state.options,
-            $query: this.lastQuery,
-         });
-         dropdown = (
-            <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 = (
-               <div
-                  key="ib"
-                  onMouseDown={preventDefault}
-                  onClick={(e) => (!this.props.multiple ? this.onClearClick(e) : this.onClearMultipleClick(e))}
-                  className={CSS.element(baseClass, "clear")}
-               >
-                  <ClearIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-         } else {
-            insideButton = (
-               <div
-                  key="ib"
-                  className={CSS.element(baseClass, "tool")}
-                  onMouseDown={preventDefault}
-                  onClick={(e) => {
-                     this.toggleDropdown(e, true);
-                     e.stopPropagation();
-                     e.preventDefault();
-                  }}
-               >
-                  <DropdownIcon className={CSS.element(baseClass, "icon")} />
-               </div>
-            );
-         }
-      }
-
-      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) => (
-               <div
-                  key={i}
-                  className={CSS.element(baseClass, "tag", {
-                     readonly: readOnly,
-                  })}
-               >
-                  <span className={CSS.element(baseClass, "tag-value")}>{valueTextFormatter(v, instance)}</span>
-                  {!readOnly && (
-                     <div
-                        className={CSS.element(baseClass, "tag-clear")}
-                        onMouseDown={(e) => {
-                           e.preventDefault();
-                           e.stopPropagation();
-                        }}
-                        onClick={(e) => this.onClearClick(e, v)}
-                     >
-                        <ClearIcon className={CSS.element(baseClass, "icon")} />
-                     </div>
-                  )}
-               </div>
-            ));
-         } 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 (
-         <div
-            className={CSS.expand(data.classNames, CSS.state(states))}
-            style={data.style}
-            onMouseDown={stopPropagation}
-            onTouchStart={stopPropagation}
-            onKeyDown={(e) => this.onKeyDown(e)}
-         >
-            <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)}
-               onInput={(e) => this.onChange(e, "input")}
-               onChange={(e) => this.onChange(e, "change")}
-               onKeyDown={(e) => this.onInputKeyDown(e)}
-               onMouseDown={(e) => this.onMouseDown(e)}
-               onBlur={(e) => this.onBlur(e)}
-               onFocus={(e) => this.onFocus(e)}
-            >
-               {text}
-            </div>
-            {insideButton}
-            {icon}
-            {dropdown}
-            {label}
-            {help}
-         </div>
-      );
-   }
-
-   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(e)) 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(e)) 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;
-
-      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) {
-      tooltipParentWillReceiveProps(this.dom.input, ...getFieldTooltip(props.instance));
-   }
-
-   componentDidMount() {
-      tooltipParentDidMount(this.dom.input, ...getFieldTooltip(this.props.instance));
-      autoFocus(this.dom.input, this);
-   }
-
-   componentDidUpdate() {
-      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", (e) => this.onListScroll(e), {
-            passive: false,
-         });
-      }
-   }
-
-   submitOnEnter(e) {
-      let instance = this.props.instance.parent;
-      while (instance) {
-         if (instance.events && instance.events.onSubmit) {
-            instance.events.onSubmit(e, instance);
-            break;
-         } else {
-            instance = instance.parent;
-         }
-      }
-   }
-}