cx 26.3.9 → 26.4.0

package/src/widgets/form/TextField.tsx

@@ -1,453 +1,453 @@
-/** @jsxImportSource react */
-
-import { Instance } from "../../ui/Instance";
-import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
-import { Widget, getContent } from "../../ui/Widget";
-import { Field, FieldConfig, getFieldTooltip } from "./Field";
-
-export interface TextFieldConfig extends FieldConfig {
-  /** Textual value of the input field. */
-  value?: Prop<any>;
-
-  /** Default text displayed when the field is empty. */
-  placeholder?: StringProp;
-
-  /** Defaults to `false`. Used to make the field read-only. */
-  readOnly?: BooleanProp;
-
-  /** Defaults to `false`. Used to make the field required. */
-  required?: BooleanProp;
-
-  /** Minimal length of the input text. */
-  minLength?: NumberProp;
-
-  /** Maximal length of the input text. */
-  maxLength?: NumberProp;
-
-  /** Regular expression used to validate the user's input. */
-  validationRegExp?: Prop<RegExp>;
-
-  /** Error message displayed upon validation failure. */
-  validationErrorText?: StringProp;
-
-  /** Error message displayed when input text is too short. */
-  minLengthValidationErrorText?: StringProp;
-
-  /** Error message displayed when input text is too long. */
-  maxLengthValidationErrorText?: StringProp;
-
-  /** Event triggering value updates. Possible values are `input` (default), `enter`, or `blur`. Multiple values can be separated by space. */
-  reactOn?: StringProp;
-
-  /** Input type. Defaults to `text`. Other common value is `password`. */
-  inputType?: StringProp;
-
-  /** Base CSS class to be applied to the field. Defaults to `textfield`. */
-  baseClass?: string;
-
-  /** Keyboard shortcut used to focus the field. */
-  keyboardShortcut?: StringProp;
-
-  /** Set to `true` to remove leading and trailing whitespace. Default is `false`. */
-  trim?: BooleanProp;
-
-  /** Set to `true` to hide the clear button. Default value is `false`. */
-  hideClear?: BooleanProp;
-
-  /** Set to `false` to hide the clear button. Default value is `true`. */
-  showClear?: BooleanProp;
-
-  /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
-  alwaysShowClear?: BooleanProp;
-
-  /** Name or configuration of the icon to be put on the left side of the input. */
-  icon?: string | FieldIconConfig;
-
-  /** Additional attributes to be passed to the input element. */
-  inputAttrs?: Prop<any>;
-
-  /** If `trackFocus` is set, this value will be set when the field receives or loses focus. */
-  focused?: BooleanProp;
-
-  /** Callback invoked when the field receives focus. */
-  onFocus?: string | ((e: FocusEvent, instance: Instance) => void);
-
-  /** Callback invoked when the field loses focus. */
-  onBlur?: string | ((e: FocusEvent, instance: Instance) => void);
-
-  /** Handler triggered on key down events. Return `false` to prevent default behavior. */
-  onKeyDown?:
-    | string
-    | ((e: React.KeyboardEvent, instance: Instance) => boolean | void);
-
-  /** Custom validation function. Can return a Promise for async validation. */
-  onValidate?:
-    | string
-    | ((
-        value: string,
-        instance: Instance,
-        validationParams: any,
-      ) => string | undefined | false | Promise<string | undefined | false>);
-}
-
-// Legacy alias for backward compatibility
-export interface TextFieldProps extends TextFieldConfig {}
-
-import { StringTemplate } from "../../data/StringTemplate";
-import { Localization } from "../../ui/Localization";
-import { VDOM } from "../../ui/VDOM";
-import { preventDefault, stopPropagation } from "../../util/eventCallbacks";
-import { getActiveElement } from "../../util/getActiveElement";
-import { isString } from "../../util/isString";
-import { KeyCode } from "../../util/KeyCode";
-import { autoFocus } from "../autoFocus";
-import ClearIcon from "../icons/clear";
-import {
-  tooltipMouseLeave,
-  tooltipMouseMove,
-  tooltipParentDidMount,
-  tooltipParentWillReceiveProps,
-  tooltipParentWillUnmount,
-} from "../overlay/tooltip-ops";
-import { FieldIconConfig } from "./FieldIcon";
-
-export class TextField<
-  Config extends TextFieldConfig = TextFieldConfig,
-> extends Field<Config> {
-  declare public hideClear?: boolean;
-  declare public showClear?: boolean;
-  declare public alwaysShowClear?: boolean;
-  declare public validationRegExp?: RegExp;
-  declare public validationErrorText?: string;
-  declare public minLengthValidationErrorText: string;
-  declare public maxLengthValidationErrorText: string;
-  declare public reactOn: string;
-  declare public inputType?: string;
-  declare public keyboardShortcut?: string;
-  declare public trim?: boolean;
-
-  public init(): void {
-    if (typeof this.hideClear !== "undefined") this.showClear = !this.hideClear;
-
-    if (this.alwaysShowClear) this.showClear = true;
-
-    super.init();
-  }
-
-  public declareData(...args: any[]): void {
-    super.declareData(
-      {
-        value: this.emptyValue,
-        disabled: undefined,
-        readOnly: undefined,
-        enabled: undefined,
-        placeholder: undefined,
-        required: undefined,
-        minLength: undefined,
-        maxLength: undefined,
-        trim: undefined,
-        inputType: undefined,
-      },
-      ...args,
-    );
-  }
-
-  public renderInput(context: any, instance: any, key?: any): any {
-    return (
-      <Input
-        key={key}
-        instance={instance}
-        data={instance.data}
-        label={
-          this.labelPlacement &&
-          getContent(this.renderLabel(context, instance, "label"))
-        }
-        help={
-          this.helpPlacement &&
-          getContent(this.renderHelp(context, instance, "help"))
-        }
-        icon={this.renderIcon(context, instance, "icon")}
-      />
-    );
-  }
-
-  public validate(context: any, instance: any): void {
-    super.validate(context, instance);
-
-    let { data } = instance;
-
-    if (!data.error && data.value) {
-      if (this.validationRegExp) this.validationRegExp.lastIndex = 0;
-      if (this.validationRegExp && !this.validationRegExp.test(data.value))
-        data.error = this.validationErrorText;
-      else if (
-        typeof data.value === "string" &&
-        data.minLength != null &&
-        data.value.length < data.minLength
-      )
-        data.error = StringTemplate.format(
-          this.minLengthValidationErrorText,
-          data.minLength,
-          data.value.length,
-        );
-      else if (
-        typeof data.value === "string" &&
-        data.maxLength != null &&
-        data.value.length > data.maxLength
-      )
-        data.error = StringTemplate.format(
-          this.maxLengthValidationErrorText,
-          data.maxLength,
-          data.value.length,
-        );
-    }
-  }
-}
-
-TextField.prototype.baseClass = "textfield";
-TextField.prototype.reactOn = "change input blur enter";
-TextField.prototype.inputType = "text";
-TextField.prototype.validationErrorText = "The entered value is not valid.";
-TextField.prototype.minLengthValidationErrorText =
-  "Enter {[{0}-{1}]} more character(s).";
-TextField.prototype.maxLengthValidationErrorText =
-  "Use {0} characters or fewer.";
-TextField.prototype.suppressErrorsUntilVisited = true;
-TextField.prototype.icon = null;
-TextField.prototype.showClear = false;
-TextField.prototype.alwaysShowClear = false;
-TextField.prototype.keyboardShortcut = "false";
-TextField.prototype.trim = false;
-
-Localization.registerPrototype("cx/widgets/TextField", TextField);
-
-class Input extends VDOM.Component<any, any> {
-  public input?: HTMLInputElement;
-
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      focus: false,
-    };
-  }
-
-  render(): any {
-    let { instance, data, label, help, icon: iconVDOM } = this.props;
-    let { widget, state } = instance;
-    let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
-
-    let icon = iconVDOM && (
-      <div
-        className={CSS.element(baseClass, "left-icon")}
-        onMouseDown={preventDefault}
-        onClick={(e: any) => this.onChange((e.target as any).value, "enter")}
-      >
-        {iconVDOM}
-      </div>
-    );
-
-    let insideButton;
-    if (
-      widget.showClear &&
-      !data.empty &&
-      !data.readOnly &&
-      !data.disabled &&
-      (widget.alwaysShowClear || !data.required)
-    ) {
-      insideButton = (
-        <div
-          className={CSS.element(baseClass, "clear")}
-          onMouseDown={(e: any) => e.preventDefault()}
-          onClick={(e: any) => this.onClearClick(e)}
-        >
-          <ClearIcon className={CSS.element(baseClass, "icon")} />
-        </div>
-      );
-    }
-
-    let empty = this.input ? !this.trimmed(this.input.value) : data.empty;
-
-    return (
-      <div
-        className={CSS.expand(
-          data.classNames,
-          CSS.state({
-            visited: state.visited,
-            focus: this.state.focus,
-            icon: !!icon,
-            clear: insideButton != null,
-            empty: empty && !data.placeholder,
-            error:
-              data.error &&
-              (state.visited || !suppressErrorsUntilVisited || !empty),
-          }),
-        )}
-        style={data.style}
-        onMouseDown={stopPropagation}
-        onTouchStart={stopPropagation}
-      >
-        <input
-          ref={(el: HTMLInputElement | null) => {
-            this.input = el || undefined;
-          }}
-          className={CSS.expand(
-            CSS.element(baseClass, "input"),
-            data.inputClass,
-          )}
-          defaultValue={data.value}
-          id={data.id}
-          style={data.inputStyle}
-          type={data.inputType}
-          disabled={data.disabled}
-          readOnly={data.readOnly}
-          tabIndex={data.tabIndex}
-          placeholder={data.placeholder}
-          {...data.inputAttrs}
-          onMouseMove={this.onMouseMove.bind(this)}
-          onMouseLeave={this.onMouseLeave.bind(this)}
-          onInput={(e: any) => this.onChange(e.target.value, "input")}
-          onChange={(e: any) =>
-            this.onChange((e.target as any).value, "change")
-          }
-          onKeyDown={this.onKeyDown.bind(this)}
-          onFocus={this.onFocus.bind(this)}
-          onBlur={this.onBlur.bind(this)}
-          onClick={stopPropagation}
-        />
-        {insideButton}
-        {icon}
-        {label}
-        {help}
-      </div>
-    );
-  }
-
-  onFocus(): void {
-    let { instance, data } = this.props;
-    let { widget } = instance;
-    if (widget.trackFocus) {
-      this.setState({
-        focus: true,
-      });
-      instance.set("focused", true);
-    }
-    if (data.error && data.value) instance.setState({ visited: true });
-  }
-
-  onBlur(e: any): void {
-    this.onChange((e.target as any).value, "blur");
-    if (this.state.focus) {
-      this.setState({
-        focus: false,
-      });
-      this.props.instance.set("focused", false);
-    }
-  }
-
-  onClearClick(_e: any): void {
-    if (this.input) this.input.value = ""; // prevent onChange call with old text value on blur or component unmount
-    this.props.instance.set("value", this.props.instance.widget.emptyValue, {
-      immediate: true,
-    });
-  }
-
-  onMouseMove(e: any): void {
-    const tooltip = getFieldTooltip(this.props.instance);
-    tooltipMouseMove(e, tooltip[0], tooltip[1], tooltip[2]);
-  }
-
-  onMouseLeave(e: any): void {
-    const tooltip = getFieldTooltip(this.props.instance);
-    tooltipMouseLeave(e, tooltip[0], tooltip[1], tooltip[2]);
-  }
-
-  componentDidMount(): void {
-    const tooltip = getFieldTooltip(this.props.instance);
-    tooltipParentDidMount(this.input!, tooltip[0], tooltip[1], tooltip[2]);
-    autoFocus(this.input, this);
-  }
-
-  componentDidUpdate(): void {
-    autoFocus(this.input, this);
-  }
-
-  componentWillUnmount(): void {
-    if (
-      this.input == getActiveElement() &&
-      this.input &&
-      this.input.value != this.props.data.value
-    )
-      this.onChange(this.input.value, "blur");
-    tooltipParentWillUnmount(this.props.instance);
-  }
-
-  onKeyDown(e: any): void {
-    let { instance } = this.props;
-    if (instance.widget.handleKeyDown(e, instance) === false) return;
-
-    switch (e.keyCode) {
-      case KeyCode.enter:
-        this.onChange(e.target.value, "enter");
-        break;
-
-      case KeyCode.left:
-      case KeyCode.right:
-        e.stopPropagation();
-        break;
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(props: any): void {
-    let { data } = props;
-    // The second check is required for debouncing, sometimes the value in the store lags after the input
-    // and update may be caused by some other property, i.e. visited
-    if (
-      this.input &&
-      data.value != this.input.value &&
-      data.value != this.props.data.value
-    )
-      this.input.value = data.value || "";
-    const tooltip = getFieldTooltip(props.instance);
-    tooltipParentWillReceiveProps(
-      this.input!,
-      tooltip[0],
-      tooltip[1],
-      tooltip[2],
-    );
-  }
-
-  onChange(textValue: any, change: string): void {
-    let { instance, data } = this.props;
-
-    let immediate = change == "blur" || change == "enter";
-
-    if (immediate) {
-      instance.setState({ visited: true });
-    }
-
-    let { widget } = instance;
-
-    if (widget.reactOn.indexOf(change) != -1) {
-      let text = this.trimmed(textValue);
-      if (data.maxLength != null && text.length > data.maxLength) {
-        text = text.substring(0, data.maxLength);
-        if (this.input) this.input.value = text;
-      }
-
-      let value = text || widget.emptyValue;
-      if (!instance.set("value", value, { immediate })) {
-        if (this.input && text != this.input.value && immediate)
-          this.input.value = text;
-      } else {
-        if (value) instance.setState({ visited: true });
-      }
-    }
-  }
-
-  trimmed(value: any): any {
-    if (this.props.data.trim && isString(value)) return value.trim();
-    return value;
-  }
-}
-
-Widget.alias("textfield", TextField);
+/** @jsxImportSource react */
+
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, NumberProp, Prop, StringProp } from "../../ui/Prop";
+import { Widget, getContent } from "../../ui/Widget";
+import { Field, FieldConfig, getFieldTooltip } from "./Field";
+
+export interface TextFieldConfig extends FieldConfig {
+  /** Textual value of the input field. */
+  value?: Prop<any>;
+
+  /** Default text displayed when the field is empty. */
+  placeholder?: StringProp;
+
+  /** Defaults to `false`. Used to make the field read-only. */
+  readOnly?: BooleanProp;
+
+  /** Defaults to `false`. Used to make the field required. */
+  required?: BooleanProp;
+
+  /** Minimal length of the input text. */
+  minLength?: NumberProp;
+
+  /** Maximal length of the input text. */
+  maxLength?: NumberProp;
+
+  /** Regular expression used to validate the user's input. */
+  validationRegExp?: Prop<RegExp>;
+
+  /** Error message displayed upon validation failure. */
+  validationErrorText?: StringProp;
+
+  /** Error message displayed when input text is too short. */
+  minLengthValidationErrorText?: StringProp;
+
+  /** Error message displayed when input text is too long. */
+  maxLengthValidationErrorText?: StringProp;
+
+  /** Event triggering value updates. Possible values are `input` (default), `enter`, or `blur`. Multiple values can be separated by space. */
+  reactOn?: StringProp;
+
+  /** Input type. Defaults to `text`. Other common value is `password`. */
+  inputType?: StringProp;
+
+  /** Base CSS class to be applied to the field. Defaults to `textfield`. */
+  baseClass?: string;
+
+  /** Keyboard shortcut used to focus the field. */
+  keyboardShortcut?: StringProp;
+
+  /** Set to `true` to remove leading and trailing whitespace. Default is `false`. */
+  trim?: BooleanProp;
+
+  /** Set to `true` to hide the clear button. Default value is `false`. */
+  hideClear?: BooleanProp;
+
+  /** Set to `false` to hide the clear button. Default value is `true`. */
+  showClear?: BooleanProp;
+
+  /** Set to `true` to display the clear button even if `required` is set. Default is `false`. */
+  alwaysShowClear?: BooleanProp;
+
+  /** Name or configuration of the icon to be put on the left side of the input. */
+  icon?: string | FieldIconConfig;
+
+  /** Additional attributes to be passed to the input element. */
+  inputAttrs?: Prop<any>;
+
+  /** If `trackFocus` is set, this value will be set when the field receives or loses focus. */
+  focused?: BooleanProp;
+
+  /** Callback invoked when the field receives focus. */
+  onFocus?: string | ((e: FocusEvent, instance: Instance) => void);
+
+  /** Callback invoked when the field loses focus. */
+  onBlur?: string | ((e: FocusEvent, instance: Instance) => void);
+
+  /** Handler triggered on key down events. Return `false` to prevent default behavior. */
+  onKeyDown?:
+    | string
+    | ((e: React.KeyboardEvent, instance: Instance) => boolean | void);
+
+  /** Custom validation function. Can return a Promise for async validation. */
+  onValidate?:
+    | string
+    | ((
+        value: string,
+        instance: Instance,
+        validationParams: any,
+      ) => string | undefined | false | Promise<string | undefined | false>);
+}
+
+// Legacy alias for backward compatibility
+export interface TextFieldProps extends TextFieldConfig {}
+
+import { StringTemplate } from "../../data/StringTemplate";
+import { Localization } from "../../ui/Localization";
+import { VDOM } from "../../ui/VDOM";
+import { preventDefault, stopPropagation } from "../../util/eventCallbacks";
+import { getActiveElement } from "../../util/getActiveElement";
+import { isString } from "../../util/isString";
+import { KeyCode } from "../../util/KeyCode";
+import { autoFocus } from "../autoFocus";
+import ClearIcon from "../icons/clear";
+import {
+  tooltipMouseLeave,
+  tooltipMouseMove,
+  tooltipParentDidMount,
+  tooltipParentWillReceiveProps,
+  tooltipParentWillUnmount,
+} from "../overlay/tooltip-ops";
+import { FieldIconConfig } from "./FieldIcon";
+
+export class TextField<
+  Config extends TextFieldConfig = TextFieldConfig,
+> extends Field<Config> {
+  declare public hideClear?: boolean;
+  declare public showClear?: boolean;
+  declare public alwaysShowClear?: boolean;
+  declare public validationRegExp?: RegExp;
+  declare public validationErrorText?: string;
+  declare public minLengthValidationErrorText: string;
+  declare public maxLengthValidationErrorText: string;
+  declare public reactOn: string;
+  declare public inputType?: string;
+  declare public keyboardShortcut?: string;
+  declare public trim?: boolean;
+
+  public init(): void {
+    if (typeof this.hideClear !== "undefined") this.showClear = !this.hideClear;
+
+    if (this.alwaysShowClear) this.showClear = true;
+
+    super.init();
+  }
+
+  public declareData(...args: any[]): void {
+    super.declareData(
+      {
+        value: this.emptyValue,
+        disabled: undefined,
+        readOnly: undefined,
+        enabled: undefined,
+        placeholder: undefined,
+        required: undefined,
+        minLength: undefined,
+        maxLength: undefined,
+        trim: undefined,
+        inputType: undefined,
+      },
+      ...args,
+    );
+  }
+
+  public renderInput(context: any, instance: any, key?: any): any {
+    return (
+      <Input
+        key={key}
+        instance={instance}
+        data={instance.data}
+        label={
+          this.labelPlacement &&
+          getContent(this.renderLabel(context, instance, "label"))
+        }
+        help={
+          this.helpPlacement &&
+          getContent(this.renderHelp(context, instance, "help"))
+        }
+        icon={this.renderIcon(context, instance, "icon")}
+      />
+    );
+  }
+
+  public validate(context: any, instance: any): void {
+    super.validate(context, instance);
+
+    let { data } = instance;
+
+    if (!data.error && data.value) {
+      if (this.validationRegExp) this.validationRegExp.lastIndex = 0;
+      if (this.validationRegExp && !this.validationRegExp.test(data.value))
+        data.error = this.validationErrorText;
+      else if (
+        typeof data.value === "string" &&
+        data.minLength != null &&
+        data.value.length < data.minLength
+      )
+        data.error = StringTemplate.format(
+          this.minLengthValidationErrorText,
+          data.minLength,
+          data.value.length,
+        );
+      else if (
+        typeof data.value === "string" &&
+        data.maxLength != null &&
+        data.value.length > data.maxLength
+      )
+        data.error = StringTemplate.format(
+          this.maxLengthValidationErrorText,
+          data.maxLength,
+          data.value.length,
+        );
+    }
+  }
+}
+
+TextField.prototype.baseClass = "textfield";
+TextField.prototype.reactOn = "change input blur enter";
+TextField.prototype.inputType = "text";
+TextField.prototype.validationErrorText = "The entered value is not valid.";
+TextField.prototype.minLengthValidationErrorText =
+  "Enter {[{0}-{1}]} more character(s).";
+TextField.prototype.maxLengthValidationErrorText =
+  "Use {0} characters or fewer.";
+TextField.prototype.suppressErrorsUntilVisited = true;
+TextField.prototype.icon = null;
+TextField.prototype.showClear = false;
+TextField.prototype.alwaysShowClear = false;
+TextField.prototype.keyboardShortcut = "false";
+TextField.prototype.trim = false;
+
+Localization.registerPrototype("cx/widgets/TextField", TextField);
+
+class Input extends VDOM.Component<any, any> {
+  public input?: HTMLInputElement;
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      focus: false,
+    };
+  }
+
+  render(): any {
+    let { instance, data, label, help, icon: iconVDOM } = this.props;
+    let { widget, state } = instance;
+    let { CSS, baseClass, suppressErrorsUntilVisited } = widget;
+
+    let icon = iconVDOM && (
+      <div
+        className={CSS.element(baseClass, "left-icon")}
+        onMouseDown={preventDefault}
+        onClick={(e: any) => this.onChange((e.target as any).value, "enter")}
+      >
+        {iconVDOM}
+      </div>
+    );
+
+    let insideButton;
+    if (
+      widget.showClear &&
+      !data.empty &&
+      !data.readOnly &&
+      !data.disabled &&
+      (widget.alwaysShowClear || !data.required)
+    ) {
+      insideButton = (
+        <div
+          className={CSS.element(baseClass, "clear")}
+          onMouseDown={(e: any) => e.preventDefault()}
+          onClick={(e: any) => this.onClearClick(e)}
+        >
+          <ClearIcon className={CSS.element(baseClass, "icon")} />
+        </div>
+      );
+    }
+
+    let empty = this.input ? !this.trimmed(this.input.value) : data.empty;
+
+    return (
+      <div
+        className={CSS.expand(
+          data.classNames,
+          CSS.state({
+            visited: state.visited,
+            focus: this.state.focus,
+            icon: !!icon,
+            clear: insideButton != null,
+            empty: empty && !data.placeholder,
+            error:
+              data.error &&
+              (state.visited || !suppressErrorsUntilVisited || !empty),
+          }),
+        )}
+        style={data.style}
+        onMouseDown={stopPropagation}
+        onTouchStart={stopPropagation}
+      >
+        <input
+          ref={(el: HTMLInputElement | null) => {
+            this.input = el || undefined;
+          }}
+          className={CSS.expand(
+            CSS.element(baseClass, "input"),
+            data.inputClass,
+          )}
+          defaultValue={data.value}
+          id={data.id}
+          style={data.inputStyle}
+          type={data.inputType}
+          disabled={data.disabled}
+          readOnly={data.readOnly}
+          tabIndex={data.tabIndex}
+          placeholder={data.placeholder}
+          {...data.inputAttrs}
+          onMouseMove={this.onMouseMove.bind(this)}
+          onMouseLeave={this.onMouseLeave.bind(this)}
+          onInput={(e: any) => this.onChange(e.target.value, "input")}
+          onChange={(e: any) =>
+            this.onChange((e.target as any).value, "change")
+          }
+          onKeyDown={this.onKeyDown.bind(this)}
+          onFocus={this.onFocus.bind(this)}
+          onBlur={this.onBlur.bind(this)}
+          onClick={stopPropagation}
+        />
+        {insideButton}
+        {icon}
+        {label}
+        {help}
+      </div>
+    );
+  }
+
+  onFocus(): void {
+    let { instance, data } = this.props;
+    let { widget } = instance;
+    if (widget.trackFocus) {
+      this.setState({
+        focus: true,
+      });
+      instance.set("focused", true);
+    }
+    if (data.error && data.value) instance.setState({ visited: true });
+  }
+
+  onBlur(e: any): void {
+    this.onChange((e.target as any).value, "blur");
+    if (this.state.focus) {
+      this.setState({
+        focus: false,
+      });
+      this.props.instance.set("focused", false);
+    }
+  }
+
+  onClearClick(_e: any): void {
+    if (this.input) this.input.value = ""; // prevent onChange call with old text value on blur or component unmount
+    this.props.instance.set("value", this.props.instance.widget.emptyValue, {
+      immediate: true,
+    });
+  }
+
+  onMouseMove(e: any): void {
+    const tooltip = getFieldTooltip(this.props.instance);
+    tooltipMouseMove(e, tooltip[0], tooltip[1], tooltip[2]);
+  }
+
+  onMouseLeave(e: any): void {
+    const tooltip = getFieldTooltip(this.props.instance);
+    tooltipMouseLeave(e, tooltip[0], tooltip[1], tooltip[2]);
+  }
+
+  componentDidMount(): void {
+    const tooltip = getFieldTooltip(this.props.instance);
+    tooltipParentDidMount(this.input!, tooltip[0], tooltip[1], tooltip[2]);
+    autoFocus(this.input, this);
+  }
+
+  componentDidUpdate(): void {
+    autoFocus(this.input, this);
+  }
+
+  componentWillUnmount(): void {
+    if (
+      this.input == getActiveElement() &&
+      this.input &&
+      this.input.value != this.props.data.value
+    )
+      this.onChange(this.input.value, "blur");
+    tooltipParentWillUnmount(this.props.instance);
+  }
+
+  onKeyDown(e: any): void {
+    let { instance } = this.props;
+    if (instance.widget.handleKeyDown(e, instance) === false) return;
+
+    switch (e.keyCode) {
+      case KeyCode.enter:
+        this.onChange(e.target.value, "enter");
+        break;
+
+      case KeyCode.left:
+      case KeyCode.right:
+        e.stopPropagation();
+        break;
+    }
+  }
+
+  UNSAFE_componentWillReceiveProps(props: any): void {
+    let { data } = props;
+    // The second check is required for debouncing, sometimes the value in the store lags after the input
+    // and update may be caused by some other property, i.e. visited
+    if (
+      this.input &&
+      data.value != this.input.value &&
+      data.value != this.props.data.value
+    )
+      this.input.value = data.value || "";
+    const tooltip = getFieldTooltip(props.instance);
+    tooltipParentWillReceiveProps(
+      this.input!,
+      tooltip[0],
+      tooltip[1],
+      tooltip[2],
+    );
+  }
+
+  onChange(textValue: any, change: string): void {
+    let { instance, data } = this.props;
+
+    let immediate = change == "blur" || change == "enter";
+
+    if (immediate) {
+      instance.setState({ visited: true });
+    }
+
+    let { widget } = instance;
+
+    if (widget.reactOn.indexOf(change) != -1) {
+      let text = this.trimmed(textValue);
+      if (data.maxLength != null && text.length > data.maxLength) {
+        text = text.substring(0, data.maxLength);
+        if (this.input) this.input.value = text;
+      }
+
+      let value = text || widget.emptyValue;
+      if (!instance.set("value", value, { immediate })) {
+        if (this.input && text != this.input.value && immediate)
+          this.input.value = text;
+      } else {
+        if (value) instance.setState({ visited: true });
+      }
+    }
+  }
+
+  trimmed(value: any): any {
+    if (this.props.data.trim && isString(value)) return value.trim();
+    return value;
+  }
+}
+
+Widget.alias("textfield", TextField);