cx 26.3.10 → 26.4.0

package/src/widgets/form/LookupField.tsx

@@ -1,1689 +1,1689 @@
-/**@jsxImportSource react */
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Cx } from "../../ui/Cx";
-import { Field, getFieldTooltip, FieldInstance } from "./Field";
-import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
-import { HtmlElement, HtmlElementInstance } from "../HtmlElement";
-import { Binding, BindingInput } from "../../data/Binding";
-import { debug } from "../../util/Debug";
-import { Dropdown, DropdownConfig } 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 {
-  AccessorChain,
-  isAccessorChain,
-} from "../../data/createAccessorModelProxy";
-import type { CxChild, RenderingContext } from "../../ui/RenderingContext";
-import type { DropdownInstance, Instance } from "../../ui/Instance";
-import { FieldConfig } from "./Field";
-import {
-  Prop,
-  BooleanProp,
-  StringProp,
-  StructuredProp,
-  DataRecord,
-} from "../../ui/Prop";
-
-export interface LookupBinding {
-  local: string | AccessorChain<any>;
-  remote: string | AccessorChain<any>;
-  key?: boolean;
-}
-
-/** Paged query parameters for infinite scrolling mode */
-export interface LookupFieldPagedQueryParams {
-  query: string;
-  page: number;
-  pageSize: number;
-}
-
-/** Common LookupField properties shared across all variants */
-interface LookupFieldBaseConfig<TOption = any> extends FieldConfig {
-  /** The opposite of `disabled`. */
-  enabled?: BooleanProp;
-
-  /** Defaults to `false`. Used to make the field read-only. */
-  readOnly?: BooleanProp;
-
-  /** Default text displayed when the field is empty. */
-  placeholder?: StringProp;
-
-  /** A list of available options. */
-  options?: Prop<TOption[]>;
-
-  /** Set to `true` to hide the clear button. Default value is `false`. */
-  hideClear?: boolean;
-
-  /** Set to `false` to hide the clear button. Default value is `true`. */
-  showClear?: boolean;
-
-  /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
-  alwaysShowClear?: boolean;
-
-  /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
-  baseClass?: string;
-
-  /** Name or configuration of the icon to be put on the left side of the input. */
-  icon?: StringProp | Record<string, any>;
-
-  /** Additional config to be applied to all items. */
-  itemConfig?: any;
-
-  /** An array of objects describing the mapping of option data to store data. */
-  bindings?: LookupBinding[];
-
-  /** A delay in milliseconds between typing stop and query. Default is `150`. */
-  queryDelay?: number;
-
-  /** Minimal number of characters required before query is made. */
-  minQueryLength?: number;
-
-  /** Set to `true` to hide the search field. */
-  hideSearchField?: boolean;
-
-  /** Number of options required to show search field. Defaults to `7`. */
-  minOptionsForSearchField?: number;
-
-  /** Text to display while data is being loaded. */
-  loadingText?: string;
-
-  /** Error message displayed if server query throws an exception. */
-  queryErrorText?: string;
-
-  /** Message to be displayed if no entries match the user query. */
-  noResultsText?: string;
-
-  /** Name of the field which holds the id of the option. Default is `id`. */
-  optionIdField?: string;
-
-  /** Name of the field which holds the display text of the option. Default is `text`. */
-  optionTextField?: string;
-
-  /** Name of the field to store id of selected value in multiple mode. Default is `id`. */
-  valueIdField?: string;
-
-  /** Name of the field to store display text of selected value. Default is `text`. */
-  valueTextField?: string;
-
-  /** `onQuery` will be called once to fetch all options; filtering occurs client-side. */
-  fetchAll?: boolean;
-
-  /** When set with `fetchAll`, fetched options are cached for widget lifetime. */
-  cacheAll?: boolean;
-
-  /** Close the dropdown after selection. Default is `true`. */
-  closeOnSelect?: boolean;
-
-  /** Message displayed if the entered search query is too short. */
-  minQueryLengthMessageText?: string;
-
-  /** Set to `true` to sort dropdown options. */
-  sort?: boolean;
-
-  /** Additional list options, such as grouping configuration, custom sorting, etc. */
-  listOptions?: Record<string, any>;
-
-  /** Show dropdown immediately after component mount; useful for cell editing. */
-  autoOpen?: BooleanProp;
-
-  /** Allow enter key events to propagate; useful for forms or grid cell editors. */
-  submitOnEnterKey?: BooleanProp;
-
-  /** Allow dropdown enter key events to propagate for form submission. */
-  submitOnDropdownEnterKey?: BooleanProp;
-
-  /** Allow quick selection of all displayed items on `Ctrl + A` key combination. */
-  quickSelectAll?: boolean;
-
-  /** Parameters that affect filtering. */
-  filterParams?: StructuredProp;
-
-  /** Callback to create a filter function for given filter params. */
-  onCreateVisibleOptionsFilter?:
-    | string
-    | ((filterParams: any, instance: Instance) => (option: TOption) => boolean);
-
-  /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
-  dropdownOptions?: Partial<DropdownConfig>;
-
-  /** Custom validation function. */
-  onValidate?:
-    | string
-    | ((
-        value: number | string,
-        instance: Instance,
-        validationParams: Record<string, unknown>,
-      ) => unknown);
-}
-
-// =============================================================================
-// Composable interfaces for discriminated union
-// =============================================================================
-
-/** Props for infinite mode: uses onQueryPage */
-interface LookupFieldInfiniteProps<TOption = any> {
-  /** Enable infinite scrolling. */
-  infinite: true;
-  /** Number of items per page. Default is `100`. */
-  pageSize?: number;
-  /** Query function for infinite mode. */
-  onQueryPage:
-    | string
-    | ((
-        params: LookupFieldPagedQueryParams,
-        instance: Instance,
-      ) => TOption[] | Promise<TOption[]>);
-}
-
-/** Props for standard mode: uses onQuery */
-interface LookupFieldStandardProps<TOption = any> {
-  /** Standard mode (no infinite scrolling). */
-  infinite?: false;
-
-  onQuery?:
-    | string
-    | ((query: string, instance: Instance) => TOption[] | Promise<TOption[]>);
-}
-
-/** Props for multiple selection mode */
-interface LookupFieldMultipleProps<TRecord = any> {
-  /** Enable multiple selection. */
-  multiple: true;
-  /** A list of selected ids. */
-  values?: Prop<(number | string)[]>;
-  /** A list of selected records. */
-  records?: Prop<TRecord[]>;
-  /** Custom display text for records. */
-  onGetRecordDisplayText?:
-    | ((record: TRecord, instance: Instance) => string)
-    | null;
-}
-
-/** Props for single selection mode */
-interface LookupFieldSingleProps {
-  /** Single selection (default). */
-  multiple?: false;
-  /** Selected value. */
-  value?: Prop<number | string | null>;
-  /** Text associated with the selection. */
-  text?: StringProp;
-}
-
-// =============================================================================
-// 4 Discriminated Union Variants (2 infinite × 2 multiple)
-// =============================================================================
-
-type LookupFieldInfiniteMultipleConfig<
-  TOption = any,
-  TRecord = any,
-> = LookupFieldBaseConfig<TOption> &
-  LookupFieldInfiniteProps<TOption> &
-  LookupFieldMultipleProps<TRecord>;
-
-type LookupFieldInfiniteSingleConfig<TOption = any> =
-  LookupFieldBaseConfig<TOption> &
-    LookupFieldInfiniteProps<TOption> &
-    LookupFieldSingleProps;
-
-type LookupFieldStandardMultipleConfig<
-  TOption = any,
-  TRecord = any,
-> = LookupFieldBaseConfig<TOption> &
-  LookupFieldStandardProps<TOption> &
-  LookupFieldMultipleProps<TRecord>;
-
-type LookupFieldStandardSingleConfig<TOption = any> =
-  LookupFieldBaseConfig<TOption> &
-    LookupFieldStandardProps<TOption> &
-    LookupFieldSingleProps;
-
-export type LookupFieldConfig<TOption = any, TRecord = any> =
-  | LookupFieldInfiniteMultipleConfig<TOption, TRecord>
-  | LookupFieldInfiniteSingleConfig<TOption>
-  | LookupFieldStandardMultipleConfig<TOption, TRecord>
-  | LookupFieldStandardSingleConfig<TOption>;
-
-export interface LookupFieldUniversalConfig<TOption = any, TRecord = any>
-  extends LookupFieldBaseConfig<TOption>,
-    Omit<Partial<LookupFieldSingleProps>, "multiple">,
-    Omit<Partial<LookupFieldMultipleProps<TRecord>>, "multiple">,
-    Omit<Partial<LookupFieldStandardProps<TOption>>, "infinite">,
-    Omit<Partial<LookupFieldInfiniteProps<TOption>>, "infinite"> {
-  multiple?: boolean;
-  infinite?: boolean;
-}
-
-export class LookupField<TOption = any, TRecord = any> extends Field<
-  LookupFieldConfig<TOption, TRecord>
-> {
-  declare public baseClass: string;
-  declare public multiple: boolean;
-  declare public hideClear?: boolean;
-  declare public showClear: boolean;
-  declare public alwaysShowClear: boolean;
-  declare public hideSearchField: boolean;
-  declare public minOptionsForSearchField: number;
-  declare public loadingText: string;
-  declare public queryErrorText: string;
-  declare public noResultsText: string;
-  declare public optionIdField: string;
-  declare public optionTextField: string;
-  declare public valueIdField: string;
-  declare public valueTextField: string;
-  declare public fetchAll: boolean;
-  declare public cacheAll: boolean;
-  declare public closeOnSelect: boolean;
-  declare public minQueryLengthMessageText: string;
-  declare public sort?: boolean;
-  declare public listOptions?: Record<string, any> | null;
-  declare public autoOpen?: boolean;
-  declare public submitOnEnterKey?: boolean;
-  declare public submitOnDropdownEnterKey?: boolean;
-  declare public pageSize: number;
-  declare public infinite?: boolean;
-  declare public quickSelectAll?: boolean;
-  declare public queryDelay: number;
-  declare public minQueryLength: number;
-  declare public onGetRecordDisplayText?:
-    | ((record: Record<string, any>, instance: Instance) => string)
-    | null;
-  declare public onQuery?:
-    | string
-    | ((
-        query: string,
-        instance: Instance,
-      ) => Promise<Record<string, any>[]> | Record<string, any>[]);
-  declare public onQueryPage?:
-    | string
-    | ((
-        params: LookupFieldPagedQueryParams,
-        instance: Instance,
-      ) => Promise<Record<string, any>[]> | Record<string, any>[]);
-  declare public onCreateVisibleOptionsFilter?:
-    | string
-    | ((
-        filterParams: unknown,
-        instance: Instance,
-      ) => (option: Record<string, any>) => boolean);
-  declare public value?: BindingInput;
-  declare public text?: BindingInput<string>;
-  declare public records?: Record<string, any>[];
-  declare public values?: unknown[];
-  declare public options?: Record<string, any>[];
-
-  declare public enabled?: boolean;
-  declare public placeholder?: string;
-  declare public readOnly?: boolean;
-  declare public dropdownOptions?: Partial<DropdownConfig>;
-  declare public bindings?: BindingConfig[];
-  declare public keyBindings?: BindingConfig[];
-  declare public itemConfig?: CxChild;
-
-  declareData(...args: Record<string, any>[]): void {
-    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(): void {
-    if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
-
-    if (this.alwaysShowClear) this.showClear = true;
-
-    if (!this.bindings) {
-      let b: BindingConfig[] = [];
-      if (this.value) {
-        if (isAccessorChain(this.value)) this.value = bind(this.value);
-        if ((this.value as any).bind)
-          b.push({
-            key: true,
-            local: (this.value as any).bind,
-            remote: `$option.${this.optionIdField}`,
-            set: (this.value as any).set,
-          });
-      }
-
-      if (this.text as string | AccessorChain<unknown>) {
-        if (isAccessorChain(this.text)) this.text = bind(this.text);
-        if ((this.text as any).bind)
-          b.push({
-            local: (this.text as any).bind,
-            remote: `$option.${this.optionTextField}`,
-            set: (this.text as any).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);
-
-    // backward compatibility
-    if (this.infinite && this.onQuery && !this.onQueryPage)
-      this.onQueryPage = this.onQuery as any;
-
-    if (!this.items && !this.children)
-      this.items = {
-        type: HighlightedSearchText,
-        text: { bind: `$option.${this.optionTextField}` },
-        query: { bind: "$query" },
-      } as any;
-
-    this.itemConfig = this.children || this.items;
-
-    this.items = [];
-    delete this.children;
-
-    super.init();
-  }
-
-  prepareData(
-    context: RenderingContext,
-    instance: FieldInstance<LookupField>,
-  ): void {
-    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: Record<number, Record<string, any>> = {};
-        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 as any)[this.optionTextField!]) || "";
-      }
-    }
-
-    (instance as DropdownInstance).lastDropdown = context.lastDropdown;
-
-    super.prepareData(context, instance);
-  }
-
-  renderInput(
-    context: RenderingContext,
-    instance: FieldInstance<LookupField>,
-    key: string,
-  ): React.ReactNode {
-    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: Instance,
-    options: DataRecord[],
-    query?: string,
-  ): DataRecord[] {
-    if (!query) return options;
-    let textPredicate = getSearchQueryPredicate(query);
-    return options.filter(
-      (o) =>
-        isString(o[this.optionTextField!]) &&
-        textPredicate((o as any)[this.optionTextField!] as string),
-    );
-  }
-
-  isEmpty(data: Record<string, any>): boolean {
-    if (this.multiple)
-      return !isNonEmptyArray(data.values) && !isNonEmptyArray(data.records);
-    return super.isEmpty(data);
-  }
-
-  getValidationValue(data: Record<string, any>): unknown {
-    if (this.multiple) return data.records ?? data.values;
-    return super.getValidationValue(data);
-  }
-
-  formatValue(
-    context: RenderingContext,
-    instance: Instance,
-  ): string | React.ReactNode {
-    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<string, any>) =>
-              (record as any)[this.valueTextField!] ||
-              (record as any)[this.valueIdField!];
-      return records.map((record) =>
-        valueTextFormatter(record as any, instance),
-      );
-    }
-
-    if (isArray(values)) {
-      if (isArray(options))
-        return values
-          .map((id) => {
-            let option = options.find(
-              (o) => (o as any)[this.optionIdField!] == id,
-            );
-            return option ? (option as any)[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);
-
-interface BindingConfig {
-  local: string;
-  remote: string;
-  key?: boolean;
-  set?: (value: unknown, instance: Instance) => void;
-}
-
-function getOptionKey(
-  bindings: BindingConfig[],
-  data: Record<string, any>,
-): unknown[] {
-  return bindings
-    .filter((a) => a.key)
-    .map((b) => Binding.get(b.remote).value(data));
-}
-
-function areKeysEqual(key1: unknown[], key2: unknown[]): boolean {
-  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: BindingConfig[],
-  data: Record<string, any>,
-): Record<string, any> {
-  let result: Record<string, any> = { $value: {} };
-  bindings.forEach((b) => {
-    let value = Binding.get(b.remote).value(data);
-    result = Binding.get(b.local).set(result, value);
-  });
-  return result.$value as Record<string, any>;
-}
-
-class SelectionDelegate extends Selection {
-  delegate: (record: Record<string, any>, index: number) => boolean;
-
-  constructor({
-    delegate,
-  }: {
-    delegate: (record: Record<string, any>, index: number) => boolean;
-  }) {
-    super();
-    this.delegate = delegate;
-  }
-
-  getIsSelectedDelegate(
-    store: unknown,
-  ): (record: Record<string, any>, index: number) => boolean {
-    return (record: Record<string, any>, index: number) =>
-      this.delegate(record, index);
-  }
-
-  select(): boolean {
-    return false;
-  }
-}
-
-interface LookupComponentProps {
-  instance: FieldInstance<LookupField>;
-  multiple: boolean;
-  itemConfig: unknown;
-  bindings: BindingConfig[];
-  baseClass: string;
-  label?: React.ReactNode;
-  help?: React.ReactNode;
-  forceUpdate: () => void;
-  icon?: React.ReactNode;
-}
-
-interface LookupComponentState {
-  options: unknown[];
-  formatted?: string;
-  value?: string;
-  dropdownOpen: boolean;
-  focus: boolean;
-  status?: string;
-  message?: string;
-  query?: string;
-  page?: number;
-  hover?: boolean;
-}
-
-class LookupComponent extends VDOM.Component<
-  LookupComponentProps,
-  LookupComponentState
-> {
-  dom: {
-    input?: HTMLDivElement | null;
-    dropdown?: HTMLDivElement | null;
-    list?: HTMLDivElement | null;
-    query?: HTMLInputElement | null;
-  } = {};
-  itemStore: ReadOnlyDataView;
-  dropdown?: Widget;
-  list?: Widget;
-  listKeyDown?: (e: React.KeyboardEvent) => void;
-  queryTimeoutId?: ReturnType<typeof setTimeout>;
-  cachedResult?: Record<string, any>[];
-  tmpCachedResult?: Record<string, any>[];
-  lastQueryId?: number;
-  lastQuery?: string;
-  extraPageLoadingBlocker?: string | false;
-  unsubscribeListOnWheel?: (() => void) | null;
-  unsubscribeListOnScroll?: (() => void) | null;
-
-  constructor(props: LookupComponentProps) {
-    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: Record<string, any>): unknown[] {
-    return this.props.bindings
-      .filter((a) => a.key)
-      .map((b) => Binding.get(b.remote).value(data));
-  }
-
-  getLocalKey(data: Record<string, any>): unknown[] {
-    return this.props.bindings
-      .filter((a) => a.key)
-      .map((b) => Binding.get(b.local).value(data));
-  }
-
-  findOption(options: Record<string, any>[], key: unknown[]): number {
-    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(): Widget {
-    if (this.dropdown) return this.dropdown;
-
-    let { widget }: { widget: LookupField } = this.props
-      .instance as unknown as { widget: LookupField };
-    let { lastDropdown } = this.props.instance as DropdownInstance;
-
-    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: React.MouseEvent, inst: Instance) =>
-        this.onItemClick(e, inst),
-      pipeKeyDown: (kd: (e: React.KeyboardEvent) => void) => {
-        this.listKeyDown = kd;
-      },
-      selectOnTab: true,
-      focusable: false,
-      selection: {
-        type: SelectionDelegate,
-        delegate: (data: any) =>
-          this.props.instance.data.selectedKeys.find((x: any) =>
-            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: React.MouseEvent) => 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 as HTMLElement)?.offsetHeight ||
-                0),
-          };
-        }
-      },
-      onDismissAfterScroll: () => {
-        this.closeDropdown(null, true);
-        return false;
-      },
-    };
-
-    return (this.dropdown = Widget.create(dropdown));
-  }
-
-  renderDropdownContents(): React.ReactNode {
-    let content;
-    let { instance } = this.props;
-    let { data, widget }: { data: Record<string, any>; widget: LookupField } =
-      instance as unknown as {
-        data: Record<string, any>;
-        widget: LookupField;
-      };
-    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 as HTMLDivElement;
-        }}
-        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 as HTMLInputElement;
-            }}
-            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: WheelEvent): void {
-    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(): void {
-    if (!this.dom.list) return;
-    var el = this.dom.list;
-    if (el.scrollTop > el.scrollHeight - 2 * el.offsetHeight) {
-      this.loadAdditionalOptionPages();
-    }
-  }
-
-  onDropdownFocus(e: React.FocusEvent): void {
-    if (this.dom.query && !isFocused(this.dom.query) && !isTouchDevice())
-      FocusManager.focus(this.dom.query);
-  }
-
-  getPlaceholder(text?: string): React.ReactNode {
-    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(): React.ReactNode {
-    let { instance, label, help, icon: iconVDOM } = this.props;
-    let { data, widget, state } = instance;
-    let { CSS, baseClass, suppressErrorsUntilVisited } = widget as LookupField;
-
-    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<string, any>) =>
-            record[widget.valueTextField] as string);
-        text = (
-          <div className={CSS.element(baseClass, "tags")}>
-            {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>
-            ))}
-          </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)}
-          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: React.MouseEvent): void {
-    //skip touch start to allow touch scrolling
-    if (isTouchEvent()) return;
-    e.preventDefault();
-    e.stopPropagation();
-    this.toggleDropdown(e, true);
-  }
-
-  onClick(e: React.MouseEvent): void {
-    //mouse down will handle it for non-touch events
-    if (!isTouchEvent()) return;
-    e.preventDefault();
-    e.stopPropagation();
-    this.toggleDropdown(e, true);
-  }
-
-  onItemClick(
-    e: React.KeyboardEvent | React.MouseEvent,
-    { store }: { store: { getData: () => Record<string, any> } },
-  ): void {
-    this.select(e, [store.getData()]);
-    if (!this.props.instance.widget.submitOnEnterKey || e.type != "keydown")
-      e.stopPropagation();
-    if ((e as React.KeyboardEvent).keyCode != KeyCode.tab) e.preventDefault();
-  }
-
-  onClearClick(
-    e: React.MouseEvent | React.KeyboardEvent,
-    value?: Record<string, any>,
-  ): void {
-    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: React.MouseEvent): void {
-    let { instance } = this.props;
-    instance.set("records", []);
-    instance.set("values", []);
-  }
-
-  select(
-    e: React.KeyboardEvent | React.MouseEvent,
-    itemsData: Record<string, any>[],
-    reset?: boolean,
-  ): void {
-    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: unknown[] | null = null;
-      if (singleSelect) optionKey = this.getOptionKey(itemsData[0]);
-
-      // deselect
-      if (
-        singleSelect &&
-        selectedKeys.find((k: any) => areKeysEqual(optionKey!, k))
-      ) {
-        newRecords = records.filter(
-          (v: any) =>
-            !areKeysEqual(optionKey!, this.getLocalKey({ $value: v })),
-        );
-      } else {
-        itemsData.forEach((itemData) => {
-          let valueData: Record<string, any> = {
-            $value: {},
-          };
-          bindings!.forEach((b) => {
-            valueData = Binding.get(b.local).set(
-              valueData,
-              Binding.get(b.remote).value(itemData),
-            );
-          });
-          newRecords.push(valueData.$value as Record<string, any>);
-        });
-      }
-
-      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 as React.KeyboardEvent).keyCode != KeyCode.tab) {
-        if (!isTouchEvent()) this.dom.input!.focus();
-        this.closeDropdown(e);
-      }
-    }
-
-    if (
-      (e as React.KeyboardEvent).keyCode == KeyCode.enter &&
-      widget.submitOnDropdownEnterKey
-    ) {
-      this.submitOnEnter(e as React.KeyboardEvent);
-    }
-  }
-
-  onDropdownKeyPress(e: React.KeyboardEvent): void {
-    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: React.KeyboardEvent): void {
-    switch (e.keyCode) {
-      case KeyCode.pageDown:
-      case KeyCode.pageUp:
-        if (this.state.dropdownOpen) e.preventDefault();
-        break;
-    }
-  }
-
-  onInputKeyDown(e: React.KeyboardEvent): void {
-    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: React.FocusEvent): void {
-    FocusManager.nudge();
-  }
-
-  onFocus(e: React.FocusEvent): void {
-    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: React.FocusEvent): void {
-    if (!this.state.dropdownOpen)
-      this.props.instance.setState({ visited: true });
-
-    if (this.state.focus)
-      this.setState({
-        focus: false,
-      });
-  }
-
-  toggleDropdown(
-    e: React.KeyboardEvent | React.MouseEvent,
-    keepFocus?: boolean,
-  ): void {
-    if (this.state.dropdownOpen) this.closeDropdown(e, keepFocus);
-    else this.openDropdown(e);
-  }
-
-  closeDropdown(
-    e?: React.KeyboardEvent | React.MouseEvent | null,
-    keepFocus?: boolean,
-  ): void {
-    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: React.KeyboardEvent | React.MouseEvent | null): void {
-    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: string): void {
-    /*
-       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 as DataRecord[],
-        q,
-      );
-      this.setState({
-        options: results,
-        status: "loaded",
-      });
-    }
-
-    if (widget.infinite ? widget.onQueryPage : 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;
-
-        if (!result) {
-          if (widget.infinite) {
-            let params = { query, page: 1, pageSize };
-            result = instance.invoke("onQueryPage", params, instance);
-          } else {
-            result = instance.invoke("onQuery", query, 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(): void {
-    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("onQueryPage", 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: LookupComponentProps): void {
-    if (this.dom.input) {
-      tooltipParentWillReceiveProps(
-        this.dom.input,
-        ...getFieldTooltip(props.instance),
-      );
-    }
-  }
-
-  componentDidMount(): void {
-    if (this.dom.input) {
-      tooltipParentDidMount(
-        this.dom.input,
-        ...getFieldTooltip(this.props.instance),
-      );
-      autoFocus(this.dom.input, this);
-    }
-  }
-
-  componentDidUpdate(): void {
-    if (this.dom.input) {
-      autoFocus(this.dom.input, this);
-    }
-  }
-
-  componentWillUnmount(): void {
-    if (this.queryTimeoutId) clearTimeout(this.queryTimeoutId);
-    tooltipParentWillUnmount(this.props.instance);
-    this.subscribeListOnWheel(null);
-  }
-
-  subscribeListOnWheel(list: HTMLDivElement | null): void {
-    if (this.unsubscribeListOnWheel) {
-      this.unsubscribeListOnWheel();
-      this.unsubscribeListOnWheel = null;
-    }
-    if (list) {
-      this.unsubscribeListOnWheel = addEventListenerWithOptions(
-        list,
-        "wheel",
-        (e) => this.onListWheel(e as WheelEvent),
-        {
-          passive: false,
-        },
-      );
-    }
-  }
-
-  subscribeListOnScroll(list: HTMLDivElement | null): void {
-    if (this.unsubscribeListOnScroll) {
-      this.unsubscribeListOnScroll();
-      this.unsubscribeListOnScroll = null;
-    }
-    if (list) {
-      this.unsubscribeListOnScroll = addEventListenerWithOptions(
-        list,
-        "scroll",
-        () => this.onListScroll(),
-        {
-          passive: false,
-        },
-      );
-    }
-  }
-
-  submitOnEnter(e: React.KeyboardEvent): void {
-    let instance = this.props.instance.parent;
-    while (instance) {
-      let htmlInstance = instance as HtmlElementInstance;
-      if (htmlInstance.events && htmlInstance.events.onSubmit) {
-        htmlInstance.events.onSubmit(e, instance);
-        break;
-      } else {
-        instance = instance.parent;
-      }
-    }
-  }
-}
+/**@jsxImportSource react */
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import { Cx } from "../../ui/Cx";
+import { Field, getFieldTooltip, FieldInstance } from "./Field";
+import { ReadOnlyDataView } from "../../data/ReadOnlyDataView";
+import { HtmlElement, HtmlElementInstance } from "../HtmlElement";
+import { Binding, BindingInput } from "../../data/Binding";
+import { debug } from "../../util/Debug";
+import { Dropdown, DropdownConfig } 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 {
+  AccessorChain,
+  isAccessorChain,
+} from "../../data/createAccessorModelProxy";
+import type { CxChild, RenderingContext } from "../../ui/RenderingContext";
+import type { DropdownInstance, Instance } from "../../ui/Instance";
+import { FieldConfig } from "./Field";
+import {
+  Prop,
+  BooleanProp,
+  StringProp,
+  StructuredProp,
+  DataRecord,
+} from "../../ui/Prop";
+
+export interface LookupBinding {
+  local: string | AccessorChain<any>;
+  remote: string | AccessorChain<any>;
+  key?: boolean;
+}
+
+/** Paged query parameters for infinite scrolling mode */
+export interface LookupFieldPagedQueryParams {
+  query: string;
+  page: number;
+  pageSize: number;
+}
+
+/** Common LookupField properties shared across all variants */
+interface LookupFieldBaseConfig<TOption = any> extends FieldConfig {
+  /** The opposite of `disabled`. */
+  enabled?: BooleanProp;
+
+  /** Defaults to `false`. Used to make the field read-only. */
+  readOnly?: BooleanProp;
+
+  /** Default text displayed when the field is empty. */
+  placeholder?: StringProp;
+
+  /** A list of available options. */
+  options?: Prop<TOption[]>;
+
+  /** Set to `true` to hide the clear button. Default value is `false`. */
+  hideClear?: boolean;
+
+  /** Set to `false` to hide the clear button. Default value is `true`. */
+  showClear?: boolean;
+
+  /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
+  alwaysShowClear?: boolean;
+
+  /** Base CSS class to be applied to the field. Defaults to `lookupfield`. */
+  baseClass?: string;
+
+  /** Name or configuration of the icon to be put on the left side of the input. */
+  icon?: StringProp | Record<string, any>;
+
+  /** Additional config to be applied to all items. */
+  itemConfig?: any;
+
+  /** An array of objects describing the mapping of option data to store data. */
+  bindings?: LookupBinding[];
+
+  /** A delay in milliseconds between typing stop and query. Default is `150`. */
+  queryDelay?: number;
+
+  /** Minimal number of characters required before query is made. */
+  minQueryLength?: number;
+
+  /** Set to `true` to hide the search field. */
+  hideSearchField?: boolean;
+
+  /** Number of options required to show search field. Defaults to `7`. */
+  minOptionsForSearchField?: number;
+
+  /** Text to display while data is being loaded. */
+  loadingText?: string;
+
+  /** Error message displayed if server query throws an exception. */
+  queryErrorText?: string;
+
+  /** Message to be displayed if no entries match the user query. */
+  noResultsText?: string;
+
+  /** Name of the field which holds the id of the option. Default is `id`. */
+  optionIdField?: string;
+
+  /** Name of the field which holds the display text of the option. Default is `text`. */
+  optionTextField?: string;
+
+  /** Name of the field to store id of selected value in multiple mode. Default is `id`. */
+  valueIdField?: string;
+
+  /** Name of the field to store display text of selected value. Default is `text`. */
+  valueTextField?: string;
+
+  /** `onQuery` will be called once to fetch all options; filtering occurs client-side. */
+  fetchAll?: boolean;
+
+  /** When set with `fetchAll`, fetched options are cached for widget lifetime. */
+  cacheAll?: boolean;
+
+  /** Close the dropdown after selection. Default is `true`. */
+  closeOnSelect?: boolean;
+
+  /** Message displayed if the entered search query is too short. */
+  minQueryLengthMessageText?: string;
+
+  /** Set to `true` to sort dropdown options. */
+  sort?: boolean;
+
+  /** Additional list options, such as grouping configuration, custom sorting, etc. */
+  listOptions?: Record<string, any>;
+
+  /** Show dropdown immediately after component mount; useful for cell editing. */
+  autoOpen?: BooleanProp;
+
+  /** Allow enter key events to propagate; useful for forms or grid cell editors. */
+  submitOnEnterKey?: BooleanProp;
+
+  /** Allow dropdown enter key events to propagate for form submission. */
+  submitOnDropdownEnterKey?: BooleanProp;
+
+  /** Allow quick selection of all displayed items on `Ctrl + A` key combination. */
+  quickSelectAll?: boolean;
+
+  /** Parameters that affect filtering. */
+  filterParams?: StructuredProp;
+
+  /** Callback to create a filter function for given filter params. */
+  onCreateVisibleOptionsFilter?:
+    | string
+    | ((filterParams: any, instance: Instance) => (option: TOption) => boolean);
+
+  /** Additional configuration to be passed to the dropdown, such as `style`, `positioning`, etc. */
+  dropdownOptions?: Partial<DropdownConfig>;
+
+  /** Custom validation function. */
+  onValidate?:
+    | string
+    | ((
+        value: number | string,
+        instance: Instance,
+        validationParams: Record<string, unknown>,
+      ) => unknown);
+}
+
+// =============================================================================
+// Composable interfaces for discriminated union
+// =============================================================================
+
+/** Props for infinite mode: uses onQueryPage */
+interface LookupFieldInfiniteProps<TOption = any> {
+  /** Enable infinite scrolling. */
+  infinite: true;
+  /** Number of items per page. Default is `100`. */
+  pageSize?: number;
+  /** Query function for infinite mode. */
+  onQueryPage:
+    | string
+    | ((
+        params: LookupFieldPagedQueryParams,
+        instance: Instance,
+      ) => TOption[] | Promise<TOption[]>);
+}
+
+/** Props for standard mode: uses onQuery */
+interface LookupFieldStandardProps<TOption = any> {
+  /** Standard mode (no infinite scrolling). */
+  infinite?: false;
+
+  onQuery?:
+    | string
+    | ((query: string, instance: Instance) => TOption[] | Promise<TOption[]>);
+}
+
+/** Props for multiple selection mode */
+interface LookupFieldMultipleProps<TRecord = any> {
+  /** Enable multiple selection. */
+  multiple: true;
+  /** A list of selected ids. */
+  values?: Prop<(number | string)[]>;
+  /** A list of selected records. */
+  records?: Prop<TRecord[]>;
+  /** Custom display text for records. */
+  onGetRecordDisplayText?:
+    | ((record: TRecord, instance: Instance) => string)
+    | null;
+}
+
+/** Props for single selection mode */
+interface LookupFieldSingleProps {
+  /** Single selection (default). */
+  multiple?: false;
+  /** Selected value. */
+  value?: Prop<number | string | null>;
+  /** Text associated with the selection. */
+  text?: StringProp;
+}
+
+// =============================================================================
+// 4 Discriminated Union Variants (2 infinite × 2 multiple)
+// =============================================================================
+
+type LookupFieldInfiniteMultipleConfig<
+  TOption = any,
+  TRecord = any,
+> = LookupFieldBaseConfig<TOption> &
+  LookupFieldInfiniteProps<TOption> &
+  LookupFieldMultipleProps<TRecord>;
+
+type LookupFieldInfiniteSingleConfig<TOption = any> =
+  LookupFieldBaseConfig<TOption> &
+    LookupFieldInfiniteProps<TOption> &
+    LookupFieldSingleProps;
+
+type LookupFieldStandardMultipleConfig<
+  TOption = any,
+  TRecord = any,
+> = LookupFieldBaseConfig<TOption> &
+  LookupFieldStandardProps<TOption> &
+  LookupFieldMultipleProps<TRecord>;
+
+type LookupFieldStandardSingleConfig<TOption = any> =
+  LookupFieldBaseConfig<TOption> &
+    LookupFieldStandardProps<TOption> &
+    LookupFieldSingleProps;
+
+export type LookupFieldConfig<TOption = any, TRecord = any> =
+  | LookupFieldInfiniteMultipleConfig<TOption, TRecord>
+  | LookupFieldInfiniteSingleConfig<TOption>
+  | LookupFieldStandardMultipleConfig<TOption, TRecord>
+  | LookupFieldStandardSingleConfig<TOption>;
+
+export interface LookupFieldUniversalConfig<TOption = any, TRecord = any>
+  extends LookupFieldBaseConfig<TOption>,
+    Omit<Partial<LookupFieldSingleProps>, "multiple">,
+    Omit<Partial<LookupFieldMultipleProps<TRecord>>, "multiple">,
+    Omit<Partial<LookupFieldStandardProps<TOption>>, "infinite">,
+    Omit<Partial<LookupFieldInfiniteProps<TOption>>, "infinite"> {
+  multiple?: boolean;
+  infinite?: boolean;
+}
+
+export class LookupField<TOption = any, TRecord = any> extends Field<
+  LookupFieldConfig<TOption, TRecord>
+> {
+  declare public baseClass: string;
+  declare public multiple: boolean;
+  declare public hideClear?: boolean;
+  declare public showClear: boolean;
+  declare public alwaysShowClear: boolean;
+  declare public hideSearchField: boolean;
+  declare public minOptionsForSearchField: number;
+  declare public loadingText: string;
+  declare public queryErrorText: string;
+  declare public noResultsText: string;
+  declare public optionIdField: string;
+  declare public optionTextField: string;
+  declare public valueIdField: string;
+  declare public valueTextField: string;
+  declare public fetchAll: boolean;
+  declare public cacheAll: boolean;
+  declare public closeOnSelect: boolean;
+  declare public minQueryLengthMessageText: string;
+  declare public sort?: boolean;
+  declare public listOptions?: Record<string, any> | null;
+  declare public autoOpen?: boolean;
+  declare public submitOnEnterKey?: boolean;
+  declare public submitOnDropdownEnterKey?: boolean;
+  declare public pageSize: number;
+  declare public infinite?: boolean;
+  declare public quickSelectAll?: boolean;
+  declare public queryDelay: number;
+  declare public minQueryLength: number;
+  declare public onGetRecordDisplayText?:
+    | ((record: Record<string, any>, instance: Instance) => string)
+    | null;
+  declare public onQuery?:
+    | string
+    | ((
+        query: string,
+        instance: Instance,
+      ) => Promise<Record<string, any>[]> | Record<string, any>[]);
+  declare public onQueryPage?:
+    | string
+    | ((
+        params: LookupFieldPagedQueryParams,
+        instance: Instance,
+      ) => Promise<Record<string, any>[]> | Record<string, any>[]);
+  declare public onCreateVisibleOptionsFilter?:
+    | string
+    | ((
+        filterParams: unknown,
+        instance: Instance,
+      ) => (option: Record<string, any>) => boolean);
+  declare public value?: BindingInput;
+  declare public text?: BindingInput<string>;
+  declare public records?: Record<string, any>[];
+  declare public values?: unknown[];
+  declare public options?: Record<string, any>[];
+
+  declare public enabled?: boolean;
+  declare public placeholder?: string;
+  declare public readOnly?: boolean;
+  declare public dropdownOptions?: Partial<DropdownConfig>;
+  declare public bindings?: BindingConfig[];
+  declare public keyBindings?: BindingConfig[];
+  declare public itemConfig?: CxChild;
+
+  declareData(...args: Record<string, any>[]): void {
+    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(): void {
+    if (isDefined(this.hideClear)) this.showClear = !this.hideClear;
+
+    if (this.alwaysShowClear) this.showClear = true;
+
+    if (!this.bindings) {
+      let b: BindingConfig[] = [];
+      if (this.value) {
+        if (isAccessorChain(this.value)) this.value = bind(this.value);
+        if ((this.value as any).bind)
+          b.push({
+            key: true,
+            local: (this.value as any).bind,
+            remote: `$option.${this.optionIdField}`,
+            set: (this.value as any).set,
+          });
+      }
+
+      if (this.text as string | AccessorChain<unknown>) {
+        if (isAccessorChain(this.text)) this.text = bind(this.text);
+        if ((this.text as any).bind)
+          b.push({
+            local: (this.text as any).bind,
+            remote: `$option.${this.optionTextField}`,
+            set: (this.text as any).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);
+
+    // backward compatibility
+    if (this.infinite && this.onQuery && !this.onQueryPage)
+      this.onQueryPage = this.onQuery as any;
+
+    if (!this.items && !this.children)
+      this.items = {
+        type: HighlightedSearchText,
+        text: { bind: `$option.${this.optionTextField}` },
+        query: { bind: "$query" },
+      } as any;
+
+    this.itemConfig = this.children || this.items;
+
+    this.items = [];
+    delete this.children;
+
+    super.init();
+  }
+
+  prepareData(
+    context: RenderingContext,
+    instance: FieldInstance<LookupField>,
+  ): void {
+    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: Record<number, Record<string, any>> = {};
+        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 as any)[this.optionTextField!]) || "";
+      }
+    }
+
+    (instance as DropdownInstance).lastDropdown = context.lastDropdown;
+
+    super.prepareData(context, instance);
+  }
+
+  renderInput(
+    context: RenderingContext,
+    instance: FieldInstance<LookupField>,
+    key: string,
+  ): React.ReactNode {
+    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: Instance,
+    options: DataRecord[],
+    query?: string,
+  ): DataRecord[] {
+    if (!query) return options;
+    let textPredicate = getSearchQueryPredicate(query);
+    return options.filter(
+      (o) =>
+        isString(o[this.optionTextField!]) &&
+        textPredicate((o as any)[this.optionTextField!] as string),
+    );
+  }
+
+  isEmpty(data: Record<string, any>): boolean {
+    if (this.multiple)
+      return !isNonEmptyArray(data.values) && !isNonEmptyArray(data.records);
+    return super.isEmpty(data);
+  }
+
+  getValidationValue(data: Record<string, any>): unknown {
+    if (this.multiple) return data.records ?? data.values;
+    return super.getValidationValue(data);
+  }
+
+  formatValue(
+    context: RenderingContext,
+    instance: Instance,
+  ): string | React.ReactNode {
+    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<string, any>) =>
+              (record as any)[this.valueTextField!] ||
+              (record as any)[this.valueIdField!];
+      return records.map((record) =>
+        valueTextFormatter(record as any, instance),
+      );
+    }
+
+    if (isArray(values)) {
+      if (isArray(options))
+        return values
+          .map((id) => {
+            let option = options.find(
+              (o) => (o as any)[this.optionIdField!] == id,
+            );
+            return option ? (option as any)[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);
+
+interface BindingConfig {
+  local: string;
+  remote: string;
+  key?: boolean;
+  set?: (value: unknown, instance: Instance) => void;
+}
+
+function getOptionKey(
+  bindings: BindingConfig[],
+  data: Record<string, any>,
+): unknown[] {
+  return bindings
+    .filter((a) => a.key)
+    .map((b) => Binding.get(b.remote).value(data));
+}
+
+function areKeysEqual(key1: unknown[], key2: unknown[]): boolean {
+  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: BindingConfig[],
+  data: Record<string, any>,
+): Record<string, any> {
+  let result: Record<string, any> = { $value: {} };
+  bindings.forEach((b) => {
+    let value = Binding.get(b.remote).value(data);
+    result = Binding.get(b.local).set(result, value);
+  });
+  return result.$value as Record<string, any>;
+}
+
+class SelectionDelegate extends Selection {
+  delegate: (record: Record<string, any>, index: number) => boolean;
+
+  constructor({
+    delegate,
+  }: {
+    delegate: (record: Record<string, any>, index: number) => boolean;
+  }) {
+    super();
+    this.delegate = delegate;
+  }
+
+  getIsSelectedDelegate(
+    store: unknown,
+  ): (record: Record<string, any>, index: number) => boolean {
+    return (record: Record<string, any>, index: number) =>
+      this.delegate(record, index);
+  }
+
+  select(): boolean {
+    return false;
+  }
+}
+
+interface LookupComponentProps {
+  instance: FieldInstance<LookupField>;
+  multiple: boolean;
+  itemConfig: unknown;
+  bindings: BindingConfig[];
+  baseClass: string;
+  label?: React.ReactNode;
+  help?: React.ReactNode;
+  forceUpdate: () => void;
+  icon?: React.ReactNode;
+}
+
+interface LookupComponentState {
+  options: unknown[];
+  formatted?: string;
+  value?: string;
+  dropdownOpen: boolean;
+  focus: boolean;
+  status?: string;
+  message?: string;
+  query?: string;
+  page?: number;
+  hover?: boolean;
+}
+
+class LookupComponent extends VDOM.Component<
+  LookupComponentProps,
+  LookupComponentState
+> {
+  dom: {
+    input?: HTMLDivElement | null;
+    dropdown?: HTMLDivElement | null;
+    list?: HTMLDivElement | null;
+    query?: HTMLInputElement | null;
+  } = {};
+  itemStore: ReadOnlyDataView;
+  dropdown?: Widget;
+  list?: Widget;
+  listKeyDown?: (e: React.KeyboardEvent) => void;
+  queryTimeoutId?: ReturnType<typeof setTimeout>;
+  cachedResult?: Record<string, any>[];
+  tmpCachedResult?: Record<string, any>[];
+  lastQueryId?: number;
+  lastQuery?: string;
+  extraPageLoadingBlocker?: string | false;
+  unsubscribeListOnWheel?: (() => void) | null;
+  unsubscribeListOnScroll?: (() => void) | null;
+
+  constructor(props: LookupComponentProps) {
+    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: Record<string, any>): unknown[] {
+    return this.props.bindings
+      .filter((a) => a.key)
+      .map((b) => Binding.get(b.remote).value(data));
+  }
+
+  getLocalKey(data: Record<string, any>): unknown[] {
+    return this.props.bindings
+      .filter((a) => a.key)
+      .map((b) => Binding.get(b.local).value(data));
+  }
+
+  findOption(options: Record<string, any>[], key: unknown[]): number {
+    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(): Widget {
+    if (this.dropdown) return this.dropdown;
+
+    let { widget }: { widget: LookupField } = this.props
+      .instance as unknown as { widget: LookupField };
+    let { lastDropdown } = this.props.instance as DropdownInstance;
+
+    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: React.MouseEvent, inst: Instance) =>
+        this.onItemClick(e, inst),
+      pipeKeyDown: (kd: (e: React.KeyboardEvent) => void) => {
+        this.listKeyDown = kd;
+      },
+      selectOnTab: true,
+      focusable: false,
+      selection: {
+        type: SelectionDelegate,
+        delegate: (data: any) =>
+          this.props.instance.data.selectedKeys.find((x: any) =>
+            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: React.MouseEvent) => 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 as HTMLElement)?.offsetHeight ||
+                0),
+          };
+        }
+      },
+      onDismissAfterScroll: () => {
+        this.closeDropdown(null, true);
+        return false;
+      },
+    };
+
+    return (this.dropdown = Widget.create(dropdown));
+  }
+
+  renderDropdownContents(): React.ReactNode {
+    let content;
+    let { instance } = this.props;
+    let { data, widget }: { data: Record<string, any>; widget: LookupField } =
+      instance as unknown as {
+        data: Record<string, any>;
+        widget: LookupField;
+      };
+    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 as HTMLDivElement;
+        }}
+        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 as HTMLInputElement;
+            }}
+            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: WheelEvent): void {
+    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(): void {
+    if (!this.dom.list) return;
+    var el = this.dom.list;
+    if (el.scrollTop > el.scrollHeight - 2 * el.offsetHeight) {
+      this.loadAdditionalOptionPages();
+    }
+  }
+
+  onDropdownFocus(e: React.FocusEvent): void {
+    if (this.dom.query && !isFocused(this.dom.query) && !isTouchDevice())
+      FocusManager.focus(this.dom.query);
+  }
+
+  getPlaceholder(text?: string): React.ReactNode {
+    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(): React.ReactNode {
+    let { instance, label, help, icon: iconVDOM } = this.props;
+    let { data, widget, state } = instance;
+    let { CSS, baseClass, suppressErrorsUntilVisited } = widget as LookupField;
+
+    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<string, any>) =>
+            record[widget.valueTextField] as string);
+        text = (
+          <div className={CSS.element(baseClass, "tags")}>
+            {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>
+            ))}
+          </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)}
+          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: React.MouseEvent): void {
+    //skip touch start to allow touch scrolling
+    if (isTouchEvent()) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.toggleDropdown(e, true);
+  }
+
+  onClick(e: React.MouseEvent): void {
+    //mouse down will handle it for non-touch events
+    if (!isTouchEvent()) return;
+    e.preventDefault();
+    e.stopPropagation();
+    this.toggleDropdown(e, true);
+  }
+
+  onItemClick(
+    e: React.KeyboardEvent | React.MouseEvent,
+    { store }: { store: { getData: () => Record<string, any> } },
+  ): void {
+    this.select(e, [store.getData()]);
+    if (!this.props.instance.widget.submitOnEnterKey || e.type != "keydown")
+      e.stopPropagation();
+    if ((e as React.KeyboardEvent).keyCode != KeyCode.tab) e.preventDefault();
+  }
+
+  onClearClick(
+    e: React.MouseEvent | React.KeyboardEvent,
+    value?: Record<string, any>,
+  ): void {
+    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: React.MouseEvent): void {
+    let { instance } = this.props;
+    instance.set("records", []);
+    instance.set("values", []);
+  }
+
+  select(
+    e: React.KeyboardEvent | React.MouseEvent,
+    itemsData: Record<string, any>[],
+    reset?: boolean,
+  ): void {
+    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: unknown[] | null = null;
+      if (singleSelect) optionKey = this.getOptionKey(itemsData[0]);
+
+      // deselect
+      if (
+        singleSelect &&
+        selectedKeys.find((k: any) => areKeysEqual(optionKey!, k))
+      ) {
+        newRecords = records.filter(
+          (v: any) =>
+            !areKeysEqual(optionKey!, this.getLocalKey({ $value: v })),
+        );
+      } else {
+        itemsData.forEach((itemData) => {
+          let valueData: Record<string, any> = {
+            $value: {},
+          };
+          bindings!.forEach((b) => {
+            valueData = Binding.get(b.local).set(
+              valueData,
+              Binding.get(b.remote).value(itemData),
+            );
+          });
+          newRecords.push(valueData.$value as Record<string, any>);
+        });
+      }
+
+      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 as React.KeyboardEvent).keyCode != KeyCode.tab) {
+        if (!isTouchEvent()) this.dom.input!.focus();
+        this.closeDropdown(e);
+      }
+    }
+
+    if (
+      (e as React.KeyboardEvent).keyCode == KeyCode.enter &&
+      widget.submitOnDropdownEnterKey
+    ) {
+      this.submitOnEnter(e as React.KeyboardEvent);
+    }
+  }
+
+  onDropdownKeyPress(e: React.KeyboardEvent): void {
+    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: React.KeyboardEvent): void {
+    switch (e.keyCode) {
+      case KeyCode.pageDown:
+      case KeyCode.pageUp:
+        if (this.state.dropdownOpen) e.preventDefault();
+        break;
+    }
+  }
+
+  onInputKeyDown(e: React.KeyboardEvent): void {
+    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: React.FocusEvent): void {
+    FocusManager.nudge();
+  }
+
+  onFocus(e: React.FocusEvent): void {
+    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: React.FocusEvent): void {
+    if (!this.state.dropdownOpen)
+      this.props.instance.setState({ visited: true });
+
+    if (this.state.focus)
+      this.setState({
+        focus: false,
+      });
+  }
+
+  toggleDropdown(
+    e: React.KeyboardEvent | React.MouseEvent,
+    keepFocus?: boolean,
+  ): void {
+    if (this.state.dropdownOpen) this.closeDropdown(e, keepFocus);
+    else this.openDropdown(e);
+  }
+
+  closeDropdown(
+    e?: React.KeyboardEvent | React.MouseEvent | null,
+    keepFocus?: boolean,
+  ): void {
+    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: React.KeyboardEvent | React.MouseEvent | null): void {
+    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: string): void {
+    /*
+       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 as DataRecord[],
+        q,
+      );
+      this.setState({
+        options: results,
+        status: "loaded",
+      });
+    }
+
+    if (widget.infinite ? widget.onQueryPage : 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;
+
+        if (!result) {
+          if (widget.infinite) {
+            let params = { query, page: 1, pageSize };
+            result = instance.invoke("onQueryPage", params, instance);
+          } else {
+            result = instance.invoke("onQuery", query, 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(): void {
+    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("onQueryPage", 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: LookupComponentProps): void {
+    if (this.dom.input) {
+      tooltipParentWillReceiveProps(
+        this.dom.input,
+        ...getFieldTooltip(props.instance),
+      );
+    }
+  }
+
+  componentDidMount(): void {
+    if (this.dom.input) {
+      tooltipParentDidMount(
+        this.dom.input,
+        ...getFieldTooltip(this.props.instance),
+      );
+      autoFocus(this.dom.input, this);
+    }
+  }
+
+  componentDidUpdate(): void {
+    if (this.dom.input) {
+      autoFocus(this.dom.input, this);
+    }
+  }
+
+  componentWillUnmount(): void {
+    if (this.queryTimeoutId) clearTimeout(this.queryTimeoutId);
+    tooltipParentWillUnmount(this.props.instance);
+    this.subscribeListOnWheel(null);
+  }
+
+  subscribeListOnWheel(list: HTMLDivElement | null): void {
+    if (this.unsubscribeListOnWheel) {
+      this.unsubscribeListOnWheel();
+      this.unsubscribeListOnWheel = null;
+    }
+    if (list) {
+      this.unsubscribeListOnWheel = addEventListenerWithOptions(
+        list,
+        "wheel",
+        (e) => this.onListWheel(e as WheelEvent),
+        {
+          passive: false,
+        },
+      );
+    }
+  }
+
+  subscribeListOnScroll(list: HTMLDivElement | null): void {
+    if (this.unsubscribeListOnScroll) {
+      this.unsubscribeListOnScroll();
+      this.unsubscribeListOnScroll = null;
+    }
+    if (list) {
+      this.unsubscribeListOnScroll = addEventListenerWithOptions(
+        list,
+        "scroll",
+        () => this.onListScroll(),
+        {
+          passive: false,
+        },
+      );
+    }
+  }
+
+  submitOnEnter(e: React.KeyboardEvent): void {
+    let instance = this.props.instance.parent;
+    while (instance) {
+      let htmlInstance = instance as HtmlElementInstance;
+      if (htmlInstance.events && htmlInstance.events.onSubmit) {
+        htmlInstance.events.onSubmit(e, instance);
+        break;
+      } else {
+        instance = instance.parent;
+      }
+    }
+  }
+}