TreeView: Prevent events duplication when items change at runtime in selectAll mode (T1314209) (DevExpress#31819)

Author: EugeniyKiyashko

packages/devextreme/js/__internal/ui/tree_view/tree_view.base.ts

@@ -1,7 +1,9 @@
 import { fx } from '@js/common/core/animation';
 import { name as clickEventName } from '@js/common/core/events/click';
+import { name as contextMenuEventName } from '@js/common/core/events/contextmenu';
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import { name as dblclickEvent } from '@js/common/core/events/double_click';
+import holdEvent from '@js/common/core/events/hold';
 import pointerEvents from '@js/common/core/events/pointer';
 import { addNamespace } from '@js/common/core/events/utils';
 import messageLocalization from '@js/common/core/localization/message';
@@ -63,22 +65,22 @@ const CUSTOM_EXPANDER_ICON_ITEM_CONTAINER_CLASS = `${WIDGET_CLASS}-custom-expand
 const ITEM_WITHOUT_CHECKBOX_CLASS = `${ITEM_CLASS}-without-checkbox`;
 const ITEM_DATA_KEY = `${ITEM_CLASS}-data`;
 
-const TOGGLE_ITEM_VISIBILITY_CLASS = `${WIDGET_CLASS}-toggle-item-visibility`;
+export const TOGGLE_ITEM_VISIBILITY_CLASS = `${WIDGET_CLASS}-toggle-item-visibility`;
 const CUSTOM_COLLAPSE_ICON_CLASS = `${WIDGET_CLASS}-custom-collapse-icon`;
 const CUSTOM_EXPAND_ICON_CLASS = `${WIDGET_CLASS}-custom-expand-icon`;
 
 const LOAD_INDICATOR_CLASS = `${WIDGET_CLASS}-loadindicator`;
 const LOAD_INDICATOR_WRAPPER_CLASS = `${WIDGET_CLASS}-loadindicator-wrapper`;
 const TOGGLE_ITEM_VISIBILITY_OPENED_CLASS = `${WIDGET_CLASS}-toggle-item-visibility-opened`;
-const SELECT_ALL_ITEM_CLASS = `${WIDGET_CLASS}-select-all-item`;
+export const SELECT_ALL_ITEM_CLASS = `${WIDGET_CLASS}-select-all-item`;
 
 const INVISIBLE_STATE_CLASS = 'dx-state-invisible';
 const DISABLED_STATE_CLASS = 'dx-state-disabled';
 const SELECTED_ITEM_CLASS = 'dx-state-selected';
 const EXPAND_EVENT_NAMESPACE = 'dxTreeView_expand';
 const DATA_ITEM_ID = 'data-item-id';
 const ITEM_URL_CLASS = 'dx-item-url';
-const CHECK_BOX_CLASS = 'dx-checkbox';
+export const CHECK_BOX_CLASS = 'dx-checkbox';
 const CHECK_BOX_ICON_CLASS = 'dx-checkbox-icon';
 const ROOT_NODE_CLASS = `${WIDGET_CLASS}-root-node`;
 export const EXPANDER_ICON_STUB_CLASS = `${WIDGET_CLASS}-expander-icon-stub`;
@@ -1075,6 +1077,22 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
     eventsEngine.off(itemsContainer, `.${EXPAND_EVENT_NAMESPACE}`, this._itemSelector());
   }
 
+  _detachHoldEvent(itemsContainer: dxElementWrapper): void {
+    const itemSelector = this._itemSelector();
+    // @ts-expect-error ts-error
+    const eventName = addNamespace(holdEvent.name, this.NAME);
+
+    eventsEngine.off(itemsContainer, eventName, itemSelector);
+  }
+
+  _detachContextMenuEvent(itemsContainer: dxElementWrapper): void {
+    const itemSelector = this._itemSelector();
+    // @ts-expect-error ts-error
+    const eventName = addNamespace(contextMenuEventName, this.NAME);
+
+    eventsEngine.off(itemsContainer, eventName, itemSelector);
+  }
+
   _getEventNameByOption(name: TreeViewExpandEvent | undefined): string {
     const event = name === 'click' ? clickEventName : dblclickEvent;
     return addNamespace(event, EXPAND_EVENT_NAMESPACE);
@@ -1817,7 +1835,10 @@ class TreeViewBase extends HierarchicalCollectionWidget<TreeViewBaseProperties,
 
   _detachClickEvent(itemsContainer: dxElementWrapper): void {
     const {
-      clickEventNamespace, itemSelector, pointerDownEventNamespace, nodeSelector,
+      clickEventNamespace,
+      pointerDownEventNamespace,
+      nodeSelector,
+      itemSelector,
     } = this._getItemClickEventData();
 
     eventsEngine.off(itemsContainer, clickEventNamespace, itemSelector);

packages/devextreme/js/__internal/ui/tree_view/tree_view.search.ts

@@ -195,13 +195,56 @@ class TreeViewSearch extends TreeViewBase {
       return this._getNodeContainer();
     }
 
-    if (this._scrollable && isSearchMode) {
-      return $(this._scrollable.content());
+    if (this.getScrollable() && isSearchMode) {
+      return $(this.getScrollable().content());
     }
 
     return super._itemContainer();
   }
 
+  _applyToAllItemContainers(callback: (itemsContainer: dxElementWrapper) => void): void {
+    if (this.getScrollable()) {
+      callback($(this.getScrollable().content()));
+    }
+
+    const nodeContainer = this._getNodeContainer();
+    if (nodeContainer.length) {
+      callback(nodeContainer);
+    }
+
+    callback(this.$element());
+  }
+
+  _attachClickEvent(): void {
+    if (this._selectAllEnabled()) {
+      this._applyToAllItemContainers((itemsContainer) => {
+        this._detachClickEvent(itemsContainer);
+      });
+    }
+
+    super._attachClickEvent();
+  }
+
+  _attachHoldEvent(): void {
+    if (this._selectAllEnabled()) {
+      this._applyToAllItemContainers((itemsContainer) => {
+        this._detachHoldEvent(itemsContainer);
+      });
+    }
+
+    super._attachHoldEvent();
+  }
+
+  _attachContextMenuEvent(): void {
+    if (this._selectAllEnabled()) {
+      this._applyToAllItemContainers((itemsContainer) => {
+        this._detachContextMenuEvent(itemsContainer);
+      });
+    }
+
+    super._attachContextMenuEvent();
+  }
+
   _addWidgetClass(): void {
     this.$element().addClass(this._widgetClass());
   }