cx 22.1.3 → 22.3.1

package/dist/ui.js

@@ -1629,8 +1629,7 @@ function unfocusElement(target, forceBlur) {
 	}
 
 	var activeElement = getActiveElement();
-	if (!target) target = activeElement;
-	else if (target != activeElement && !target.contains(activeElement)) return; //find the closest focusable parent of the target element and focus it instead
+	if (!target) target = activeElement; //find the closest focusable parent of the target element and focus it instead
 
 	var focusableParent =
 		(!forceBlur &&
@@ -5023,14 +5022,11 @@ var TreeAdapter = /*#__PURE__*/ (function(_ArrayAdapter) {
 	_proto.processList = function processList(context, instance, level, parentKey, nodes, result) {
 		var _this = this;
 
-		var nonLeafs = [],
-			leafs = [];
 		nodes.forEach(function(record) {
 			record.key = parentKey + record.key;
 
-			_this.processNode(context, instance, level, record.data.$leaf ? leafs : nonLeafs, record);
+			_this.processNode(context, instance, level, result, record);
 		});
-		result.push.apply(result, nonLeafs.concat(leafs));
 	};
 
 	_proto.processNode = function processNode(context, instance, level, result, record) {

package/dist/widgets.js

@@ -3337,7 +3337,7 @@ var Overlay = /*#__PURE__*/ (function(_Container) {
 	};
 
 	_proto.initInstance = function initInstance(context, instance) {
-		instance.positionChangeSubcribers = new SubscriberList();
+		instance.positionChangeSubscribers = new SubscriberList();
 
 		_Container.prototype.initInstance.call(this, context, instance);
 	};
@@ -3366,7 +3366,7 @@ var Overlay = /*#__PURE__*/ (function(_Container) {
 		}
 
 		if (instance.cache("dismiss", instance.dismiss)) instance.markShouldUpdate(context);
-		context.push("parentPositionChangeEvent", instance.positionChangeSubcribers);
+		context.push("parentPositionChangeEvent", instance.positionChangeSubscribers);
 
 		_Container.prototype.explore.call(this, context, instance);
 	};
@@ -3481,7 +3481,7 @@ var Overlay = /*#__PURE__*/ (function(_Container) {
 			});
 		}
 
-		instance.positionChangeSubcribers.notify();
+		instance.positionChangeSubscribers.notify();
 	};
 
 	_proto.handleResize = function handleResize(e, instance, component) {
@@ -3501,7 +3501,7 @@ var Overlay = /*#__PURE__*/ (function(_Container) {
 			});
 		}
 
-		instance.positionChangeSubcribers.notify();
+		instance.positionChangeSubscribers.notify();
 	};
 
 	return Overlay;
@@ -4119,6 +4119,7 @@ var Dropdown = /*#__PURE__*/ (function(_Overlay) {
 			return _this.updateDropdownPosition(instance, component);
 		};
 
+		instance.initialScreenPosition = null;
 		var el = instance.relatedElement.parentElement;
 
 		while (el) {
@@ -4158,10 +4159,18 @@ var Dropdown = /*#__PURE__*/ (function(_Overlay) {
 		if (this.pipeValidateDropdownPosition) instance.invoke("pipeValidateDropdownPosition", null, instance);
 		if (component.offParentPositionChange) component.offParentPositionChange();
 		delete component.parentBounds;
+		delete component.initialScreenPosition;
+	};
+
+	_proto.dismissAfterScroll = function dismissAfterScroll(data, instance, component) {
+		if (this.onDismissAfterScroll && instance.invoke("onDismissAfterScroll", data, instance, component) === false)
+			return;
+		if (instance.dismiss) instance.dismiss();
 	};
 
 	_proto.updateDropdownPosition = function updateDropdownPosition(instance, component) {
-		var el = component.el;
+		var el = component.el,
+			initialScreenPosition = component.initialScreenPosition;
 		var data = instance.data,
 			relatedElement = instance.relatedElement;
 		var parentBounds = (component.parentBounds = getTopLevelBoundingClientRect(relatedElement)); //getBoundingClientRect() will return an empty rect if the element is hidden or removed
@@ -4217,13 +4226,20 @@ var Dropdown = /*#__PURE__*/ (function(_Overlay) {
 			}
 		}
 
-		var params = {
-			style: style,
-			placement: placement,
-			parentBounds: parentBounds
-		};
-		if (this.onDropdownPositionDidUpdate) instance.invoke("onDropdownPositionDidUpdate", params, instance, component);
-		instance.positionChangeSubcribers.notify();
+		if (!initialScreenPosition) initialScreenPosition = component.initialScreenPosition = parentBounds;
+		if (
+			Math.abs(parentBounds.top - initialScreenPosition.top) > this.closeOnScrollDistance ||
+			Math.abs(parentBounds.left - initialScreenPosition.left) > this.closeOnScrollDistance
+		)
+			this.dismissAfterScroll(
+				{
+					parentBounds: parentBounds,
+					initialScreenPosition: initialScreenPosition
+				},
+				instance,
+				component
+			);
+		instance.positionChangeSubscribers.notify();
 	};
 
 	_proto.applyFixedPositioningPlacementStyles = function applyFixedPositioningPlacementStyles(
@@ -4680,6 +4696,7 @@ Dropdown.prototype.touchFriendly = false;
 Dropdown.prototype.arrow = false;
 Dropdown.prototype.pad = false;
 Dropdown.prototype.elementExplode = 0;
+Dropdown.prototype.closeOnScrollDistance = 50;
 Dropdown.prototype.screenPadding = 5;
 Dropdown.prototype.firstChildDefinesHeight = false;
 Dropdown.prototype.firstChildDefinesWidth = false;
@@ -4831,16 +4848,19 @@ var Tooltip = /*#__PURE__*/ (function(_Dropdown) {
 	};
 
 	_proto.dismissTooltip = function dismissTooltip(instance) {
-		if (instance && instance.dismissTooltip) {
-			if (
-				instance.data &&
-				instance.data.alwaysVisible &&
-				this.relatedElement.ownerDocument.body.contains(this.relatedElement)
-			)
-				return;
-			instance.dismissTooltip();
-			instance.dismissTooltip = null;
-		}
+		if (!instance || !instance.dismissTooltip) return;
+		if (
+			instance.data &&
+			instance.data.alwaysVisible &&
+			this.relatedElement.ownerDocument.body.contains(this.relatedElement)
+		)
+			return;
+		instance.dismissTooltip();
+		instance.dismissTooltip = null;
+	};
+
+	_proto.dismissAfterScroll = function dismissAfterScroll(data, instance) {
+		this.dismissTooltip(instance);
 	};
 
 	_proto.checkVisible = function checkVisible(context, instance, data) {
@@ -6139,7 +6159,6 @@ MenuItem.prototype.checkedIcon = "check";
 MenuItem.prototype.uncheckedIcon = "dummy";
 MenuItem.prototype.keyboardShortcut = false;
 MenuItem.prototype.openOnFocus = true;
-MenuItem.prototype.closeDropdownOnScrollDistance = 100;
 Widget.alias("submenu", MenuItem);
 Localization.registerPrototype("cx/widgets/MenuItem", MenuItem);
 
@@ -6195,15 +6214,10 @@ var MenuItemComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 						pipeValidateDropdownPosition: function pipeValidateDropdownPosition(cb) {
 							_this2.validateDropdownPosition = cb;
 						},
-						onDropdownPositionDidUpdate: function onDropdownPositionDidUpdate(params) {
-							var parentBounds = params.parentBounds;
-							var initialScreenPosition = _this2.initialScreenPosition;
-							if (!initialScreenPosition) initialScreenPosition = _this2.initialScreenPosition = params.parentBounds;
-							if (
-								Math.abs(parentBounds.top - initialScreenPosition.top) > widget.closeDropdownOnScrollDistance ||
-								Math.abs(parentBounds.left - initialScreenPosition.left) > widget.closeDropdownOnScrollDistance
-							)
-								_this2.closeDropdown();
+						onDismissAfterScroll: function onDismissAfterScroll() {
+							_this2.closeDropdown();
+
+							return false;
 						}
 					}
 				)
@@ -8314,7 +8328,8 @@ var Checkbox = /*#__PURE__*/ (function(_Field) {
 					readOnly: undefined,
 					disabled: undefined,
 					enabled: undefined,
-					required: undefined
+					required: undefined,
+					viewText: undefined
 				}
 			].concat(Array.prototype.slice.call(arguments))
 		);
@@ -8419,6 +8434,15 @@ var Checkbox = /*#__PURE__*/ (function(_Field) {
 		]);
 	};
 
+	_proto.renderValue = function renderValue(context, _ref) {
+		var data = _ref.data;
+		if (!data.viewText) return _Field.prototype.renderValue.apply(this, arguments);
+		return /*#__PURE__*/ jsx("span", {
+			className: this.CSS.element(this.baseClass, "view-text"),
+			children: data.viewText
+		});
+	};
+
 	_proto.formatValue = function formatValue(context, instance) {
 		var data = instance.data;
 		return data.value && (data.text || this.renderChildren(context, instance));
@@ -10014,7 +10038,6 @@ LookupField.prototype.submitOnEnterKey = false;
 LookupField.prototype.submitOnDropdownEnterKey = false;
 LookupField.prototype.pageSize = 100;
 LookupField.prototype.infinite = false;
-LookupField.prototype.closeDropdownOnScrollDistance = 100;
 LookupField.prototype.quickSelectAll = false;
 Localization.registerPrototype("cx/widgets/LookupField", LookupField);
 Widget.alias("lookupfield", LookupField);
@@ -10233,15 +10256,10 @@ var LookupComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 						};
 					}
 				},
-				onDropdownPositionDidUpdate: function onDropdownPositionDidUpdate(params) {
-					var parentBounds = params.parentBounds;
-					var initialScreenPosition = _this7.initialScreenPosition;
-					if (!initialScreenPosition) initialScreenPosition = _this7.initialScreenPosition = params.parentBounds;
-					if (
-						Math.abs(parentBounds.top - initialScreenPosition.top) > widget.closeDropdownOnScrollDistance ||
-						Math.abs(parentBounds.left - initialScreenPosition.left) > widget.closeDropdownOnScrollDistance
-					)
-						_this7.closeDropdown(null, true);
+				onDismissAfterScroll: function onDismissAfterScroll() {
+					_this7.closeDropdown(null, true);
+
+					return false;
 				}
 			}
 		);
@@ -10895,7 +10913,6 @@ var LookupComponent = /*#__PURE__*/ (function(_VDOM$Component) {
 		} //delete results valid only while the dropdown is open
 
 		delete this.tmpCachedResult;
-		delete this.initialScreenPosition;
 	};
 
 	_proto3.openDropdown = function openDropdown(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "22.1.3",
+   "version": "22.3.1",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/ui/FocusManager.js

@@ -1,20 +1,14 @@
-import {
-   isSelfOrDescendant,
-   findFirst,
-   findFirstChild,
-   isFocusable,
-   closestParent,
-} from "../util/DOM";
+import { isSelfOrDescendant, findFirst, findFirstChild, isFocusable, closestParent } from "../util/DOM";
 import { batchUpdates } from "./batchUpdates";
 import { SubscriberList } from "../util/SubscriberList";
 import { isTouchEvent } from "../util/isTouchEvent";
 import { getActiveElement } from "../util/getActiveElement";
 
 /*
-*  Purpose of FocusManager is to provide focusout notifications.
-*  IE and Firefox do not provide relatedTarget info in blur events which makes it impossible
-*  to determine if focus went outside or stayed inside the component.
-*/
+ *  Purpose of FocusManager is to provide focusout notifications.
+ *  IE and Firefox do not provide relatedTarget info in blur events which makes it impossible
+ *  to determine if focus went outside or stayed inside the component.
+ */
 
 let subscribers = new SubscriberList(),
    timerInterval = 300,
@@ -53,10 +47,7 @@ export class FocusManager {
    }
 
    static nudge() {
-      if (
-         typeof document !== "undefined" &&
-         getActiveElement() !== lastActiveElement
-      ) {
+      if (typeof document !== "undefined" && getActiveElement() !== lastActiveElement) {
          if (!pending) {
             pending = true;
             setTimeout(function () {
@@ -160,17 +151,13 @@ export function preventFocusOnTouch(e, force = false) {
 
 export function unfocusElement(target = null, forceBlur = true) {
    const activeElement = getActiveElement();
-
    if (!target) target = activeElement;
-   else if (target != activeElement && !target.contains(activeElement))
-      return;
 
    //find the closest focusable parent of the target element and focus it instead
-   let focusableParent = !forceBlur &&
-      closestParent(target, (el) => isFocusable(el)) ||
-      document.body;
+   let focusableParent = (!forceBlur && closestParent(target, (el) => isFocusable(el))) || document.body;
+
    if (focusableParent === document.body) activeElement.blur();
    else focusableParent.focus();
 
    FocusManager.nudge();
-}
+}

package/src/ui/adapter/TreeAdapter.js

@@ -1,10 +1,8 @@
-import {ArrayAdapter} from './ArrayAdapter';
-import {Binding} from '../../data/Binding';
-import {isArray} from '../../util/isArray';
-import {getAccessor} from "../../data/getAccessor";
+import { getAccessor } from "../../data/getAccessor";
+import { isArray } from "../../util/isArray";
+import { ArrayAdapter } from "./ArrayAdapter";
 
 export class TreeAdapter extends ArrayAdapter {
-
    init() {
       super.init();
       this.childrenAccessor = getAccessor({ bind: `${this.recordName}.${this.childrenField}` });
@@ -13,68 +11,63 @@ export class TreeAdapter extends ArrayAdapter {
    mapRecords(context, instance, data, parentStore, recordsAccessor) {
       let nodes = super.mapRecords(context, instance, data, parentStore, recordsAccessor);
       let result = [];
-      this.processList(context, instance, 0, '', nodes, result);
+      this.processList(context, instance, 0, "", nodes, result);
       return result;
    }
 
    processList(context, instance, level, parentKey, nodes, result) {
-      let nonLeafs = [], leafs = [];
-      nodes.forEach(record => {
+      nodes.forEach((record) => {
          record.key = parentKey + record.key;
-         this.processNode(context, instance, level, record.data.$leaf ? leafs : nonLeafs, record)
+         this.processNode(context, instance, level, result, record);
       });
-      result.push(...nonLeafs, ...leafs);
    }
 
    processNode(context, instance, level, result, record) {
       result.push(record);
-      let {data, store} = record;
+      let { data, store } = record;
       data.$level = level;
       if (!data[this.leafField]) {
          if (data[this.expandedField]) {
             if (data[this.childrenField]) {
-               let childNodes = super.mapRecords(context, instance, data[this.childrenField], store, this.childrenAccessor);
-               this.processList(context, instance, level + 1, record.key + ':', childNodes, result);
-            }
-            else if (this.load && !data[this.loadedField] && !data[this.loadingField]) {
+               let childNodes = super.mapRecords(
+                  context,
+                  instance,
+                  data[this.childrenField],
+                  store,
+                  this.childrenAccessor
+               );
+               this.processList(context, instance, level + 1, record.key + ":", childNodes, result);
+            } else if (this.load && !data[this.loadedField] && !data[this.loadingField]) {
                store.set(`${this.recordName}.${this.loadingField}`, true);
                let response = this.load(context, instance, data);
                Promise.resolve(response)
-                  .then(children => {
+                  .then((children) => {
                      store.set(`${this.recordName}.${this.childrenField}`, children);
                      store.set(`${this.recordName}.${this.loadedField}`, true);
                      store.set(`${this.recordName}.${this.loadingField}`, false);
                   })
-                  .catch(response => {
+                  .catch((response) => {
                      store.set(`${this.recordName}.${this.loadingField}`, false);
-                     if (this.onLoadError)
-                        this.onLoadError(response);
+                     if (this.onLoadError) this.onLoadError(response);
                   });
             }
-         } else
-            data[this.expandedField] = false;
+         } else data[this.expandedField] = false;
       }
    }
 
    sort(sorters) {
       if (this.foldersFirst) {
-            if (!sorters || !isArray(sorters))
-                  sorters = [];
-
-            sorters = [
-                  {field: this.leafField, direction: "ASC"},
-                  ...sorters
-            ];
+         if (!sorters || !isArray(sorters)) sorters = [];
+         sorters = [{ field: this.leafField, direction: "ASC" }, ...sorters];
       }
-
       super.sort(sorters);
    }
 }
 
-TreeAdapter.prototype.childrenField = '$children';
-TreeAdapter.prototype.expandedField = '$expanded';
-TreeAdapter.prototype.leafField = '$leaf';
-TreeAdapter.prototype.loadingField = '$loading';
-TreeAdapter.prototype.loadedField = '$loaded';
+TreeAdapter.prototype.childrenField = "$children";
+TreeAdapter.prototype.expandedField = "$expanded";
+TreeAdapter.prototype.leafField = "$leaf";
+TreeAdapter.prototype.loadingField = "$loading";
+TreeAdapter.prototype.loadedField = "$loaded";
 TreeAdapter.prototype.foldersFirst = true;
 TreeAdapter.prototype.isTreeAdapter = true;

package/src/widgets/form/Checkbox.d.ts

@@ -1,39 +1,43 @@
-import * as Cx from '../../core';
-import { FieldProps } from './Field';
+import * as Cx from "../../core";
+import { FieldProps } from "./Field";
 
 interface CheckboxProps extends FieldProps {
-
    /** Value of the checkbox. `true` makes the checkbox checked. */
-   value?: Cx.BooleanProp,
+   value?: Cx.BooleanProp;
 
    /** efaults to `false`. Used to make the field read-only. */
-   readOnly?: Cx.BooleanProp,
+   readOnly?: Cx.BooleanProp;
 
    /** Base CSS class to be applied to the field. Defaults to `checkbox`. */
-   baseClass?: string,
+   baseClass?: string;
 
-   /** 
-    * Use native checkbox HTML element (`<input type="checkbox"/>`). Default is `false`. 
-    * Native checkboxes are difficult to style. 
+   /**
+    * Use native checkbox HTML element (`<input type="checkbox"/>`). Default is `false`.
+    * Native checkboxes are difficult to style.
     */
-   native?: boolean,
+   native?: boolean;
 
-   /** 
-    * Set to true to instruct the widget to indicate indeterminate state 
-    * (null or undefined value) with a square icon instead of appearing unchecked. 
+   /**
+    * Set to true to instruct the widget to indicate indeterminate state
+    * (null or undefined value) with a square icon instead of appearing unchecked.
     */
-   indeterminate?: boolean,
+   indeterminate?: boolean;
 
    /** Value of the checkbox. `true` makes the checkbox checked. */
-   checked?: Cx.BooleanProp,
+   checked?: Cx.BooleanProp;
 
    /** Text property. */
-   text?: Cx.StringProp,
+   text?: Cx.StringProp;
 
    /** Prevent moving focus on the checkbox. This is useful when checkboxes are found
     inside other focusable elements, such as grids or lists. */
-   unfocusable?: boolean
-    
+   unfocusable?: boolean;
+
+   /**
+    * Text to be displayed when checkobx is in the view mode.
+    * Useful to describe state of the checkbox in `viewMode` in a form of text, i.e. `Active/Inactive`.
+    */
+   viewText?: Cx.StringProp;
 }
 
 export class Checkbox extends Cx.Widget<CheckboxProps> {}

package/src/widgets/form/Checkbox.js

@@ -22,6 +22,7 @@ export class Checkbox extends Field {
             disabled: undefined,
             enabled: undefined,
             required: undefined,
+            viewText: undefined,
          },
          ...arguments
       );
@@ -94,6 +95,11 @@ export class Checkbox extends Field {
       ]);
    }
 
+   renderValue(context, { data }) {
+      if (!data.viewText) return super.renderValue(...arguments);
+      return <span className={this.CSS.element(this.baseClass, "view-text")}>{data.viewText}</span>;
+   }
+
    formatValue(context, instance) {
       let { data } = instance;
       return data.value && (data.text || this.renderChildren(context, instance));

package/src/widgets/form/LookupField.d.ts

@@ -152,9 +152,6 @@ interface LookupFieldProps extends FieldProps {
    /** Number of additional items to be loaded in `infinite` mode. Default is 100. */
    pageSize?: number;
 
-   /** The dropdown will be automatically closed if the page is scrolled a certain distance.  */
-   closeDropdownOnScrollDistance?: number;
-
    /** Set to `true` to allow quick selection of all displayed lookup items on `ctrl + a` keys combination.  */
    quickSelectAll?: boolean;
 }

package/src/widgets/form/LookupField.js

@@ -236,7 +236,6 @@ LookupField.prototype.submitOnEnterKey = false;
 LookupField.prototype.submitOnDropdownEnterKey = false;
 LookupField.prototype.pageSize = 100;
 LookupField.prototype.infinite = false;
-LookupField.prototype.closeDropdownOnScrollDistance = 100;
 LookupField.prototype.quickSelectAll = false;
 
 Localization.registerPrototype("cx/widgets/LookupField", LookupField);
@@ -371,16 +370,9 @@ class LookupComponent extends VDOM.Component {
                };
             }
          },
-         onDropdownPositionDidUpdate: (params) => {
-            let { parentBounds } = params;
-            let { initialScreenPosition } = this;
-            if (!initialScreenPosition) initialScreenPosition = this.initialScreenPosition = params.parentBounds;
-
-            if (
-               Math.abs(parentBounds.top - initialScreenPosition.top) > widget.closeDropdownOnScrollDistance ||
-               Math.abs(parentBounds.left - initialScreenPosition.left) > widget.closeDropdownOnScrollDistance
-            )
-               this.closeDropdown(null, true);
+         onDismissAfterScroll: () => {
+            this.closeDropdown(null, true);
+            return false;
          },
       };
 
@@ -543,7 +535,6 @@ class LookupComponent extends VDOM.Component {
             !data.disabled &&
             !data.empty &&
             (widget.alwaysShowClear || (!data.required && !this.props.multiple) || multipleEntries)
-
          ) {
             insideButton = (
                <div
@@ -720,15 +711,13 @@ class LookupComponent extends VDOM.Component {
          let newRecords = reset ? [] : [...(records || [])];
          let singleSelect = itemsData.length == 1;
          let optionKey = null;
-         if (singleSelect)
-            optionKey = this.getOptionKey(itemsData[0]);
+         if (singleSelect) optionKey = this.getOptionKey(itemsData[0]);
 
          // deselect
          if (singleSelect && selectedKeys.find((k) => areKeysEqual(optionKey, k))) {
             newRecords = records.filter((v) => !areKeysEqual(optionKey, this.getLocalKey({ $value: v })));
-         }
-         else {
-            itemsData.forEach(itemData => {
+         } else {
+            itemsData.forEach((itemData) => {
                let valueData = {
                   $value: {},
                };
@@ -787,8 +776,8 @@ class LookupComponent extends VDOM.Component {
             let { quickSelectAll, multiple } = this.props.instance.widget;
             if (!quickSelectAll || !multiple) return;
 
-            let optionsToSelect = this.state.options.map(o => ({
-               $option: o
+            let optionsToSelect = this.state.options.map((o) => ({
+               $option: o,
             }));
             this.select(e, optionsToSelect, true);
             e.stopPropagation();
@@ -798,7 +787,6 @@ class LookupComponent extends VDOM.Component {
          default:
             if (this.listKeyDown) this.listKeyDown(e);
             break;
-
       }
    }
 
@@ -896,7 +884,6 @@ class LookupComponent extends VDOM.Component {
 
       //delete results valid only while the dropdown is open
       delete this.tmpCachedResult;
-      delete this.initialScreenPosition;
    }
 
    openDropdown(e) {
@@ -968,10 +955,10 @@ class LookupComponent extends VDOM.Component {
             let params = !widget.infinite
                ? query
                : {
-                  query,
-                  page: 1,
-                  pageSize,
-               };
+                    query,
+                    page: 1,
+                    pageSize,
+                 };
 
             if (!result) result = instance.invoke("onQuery", params, instance);
 

package/src/widgets/nav/MenuItem.d.ts

@@ -19,8 +19,6 @@ export interface MenuItemProps extends Cx.HtmlElementProps {
    keyboardShortcut?: KeyboardShortcut;
    tooltip?: string | Cx.Config;
    openOnFocus?: boolean;
-   /** The dropdown will be automatically closed if the page is scrolled a certain distance.  */
-   closeDropdownOnScrollDistance?: number;
 
    /**
     * Click handler.

package/src/widgets/nav/MenuItem.js

@@ -109,7 +109,6 @@ MenuItem.prototype.checkedIcon = "check";
 MenuItem.prototype.uncheckedIcon = "dummy";
 MenuItem.prototype.keyboardShortcut = false;
 MenuItem.prototype.openOnFocus = true;
-MenuItem.prototype.closeDropdownOnScrollDistance = 100;
 
 Widget.alias("submenu", MenuItem);
 Localization.registerPrototype("cx/widgets/MenuItem", MenuItem);
@@ -145,19 +144,10 @@ class MenuItemComponent extends VDOM.Component {
             pipeValidateDropdownPosition: (cb) => {
                this.validateDropdownPosition = cb;
             },
-            onDropdownPositionDidUpdate: (params) => {
-               let { parentBounds } = params;
-               let { initialScreenPosition } = this;
-
-               if (!initialScreenPosition)
-                  initialScreenPosition = this.initialScreenPosition = params.parentBounds;
-
-               if (
-                  Math.abs(parentBounds.top - initialScreenPosition.top) > widget.closeDropdownOnScrollDistance ||
-                  Math.abs(parentBounds.left - initialScreenPosition.left) > widget.closeDropdownOnScrollDistance
-               )
-                  this.closeDropdown();
-            }
+            onDismissAfterScroll: () => {
+               this.closeDropdown();
+               return false;
+            },
          });
       }
       return this.dropdown;
@@ -261,7 +251,10 @@ class MenuItemComponent extends VDOM.Component {
    onDropdownKeyDown(e) {
       debug(menuFlag, "MenuItem", "dropdownKeyDown");
       let { horizontal } = this.props.instance;
-      if (e.keyCode == KeyCode.esc || (!isTextInputElement(e.target) && (horizontal ? e.keyCode == KeyCode.up : e.keyCode == KeyCode.left))) {
+      if (
+         e.keyCode == KeyCode.esc ||
+         (!isTextInputElement(e.target) && (horizontal ? e.keyCode == KeyCode.up : e.keyCode == KeyCode.left))
+      ) {
          FocusManager.focus(this.el);
          e.preventDefault();
          e.stopPropagation();

package/src/widgets/overlay/Dropdown.d.ts

@@ -18,6 +18,9 @@ export interface DropdownProps extends OverlayProps {
    firstChildDefinesHeight?: boolean;
    firstChildDefinesWidth?: boolean;
 
+   /** The dropdown will be automatically closed if the page is scrolled a certain distance.  */
+   closeOnScrollDistance?: number;
+
    onResolveRelatedElement?(beaconEl: Element, instance: any);
 }