dxFileManager: fix 'First item is selected when right-clicking on an empty area' (T1307139)

e2e/testcafe-devextreme/tests/fileManager/common.ts

@@ -1,5 +1,5 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
-import { Selector } from 'testcafe';
+import FileManager from 'devextreme-testcafe-models/fileManager';
 import { testScreenshot } from '../../helpers/themeUtils';
 import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
@@ -9,10 +9,10 @@ fixture.disablePageReloads`FileManager`
 
 test('Custom DropDown width for Material and Fluent themes', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
-  const viewModeButton = Selector('.dx-filemanager-toolbar-viewmode-item');
+  const fileManager = new FileManager('#container');
 
   await t
-    .click(viewModeButton);
+    .click(fileManager.getToolbarViewModeItem());
 
   await testScreenshot(t, takeScreenshot, 'drop down width.png', { element: '#container' });
 
@@ -24,3 +24,30 @@ test('Custom DropDown width for Material and Fluent themes', async (t) => {
   fileSystemProvider: [],
   height: 450,
 }));
+
+test('Thumbnails view - Should not focus the first item on right click (T1307139)', async (t) => {
+  const fileManager = new FileManager('#container');
+
+  await t
+    .rightClick(fileManager.getThumbnailsViewScrollableContainer())
+    .expect(fileManager.isThumbnailItemFocused(0)).notOk();
+}).before(async () => createWidget('dxFileManager', {
+  itemView: {
+    mode: 'thumbnails',
+  },
+  name: 'fileManager',
+  fileSystemProvider: [
+    {
+      name: 'Folder 1',
+      isDirectory: true,
+    },
+    {
+      name: 'File 1.txt',
+      isDirectory: false,
+    },
+    {
+      name: 'File 2.jpg',
+      isDirectory: false,
+    },
+  ],
+}));

packages/devextreme/js/ui/file_manager/ui.file_manager.item_list.thumbnails.js

@@ -27,9 +27,22 @@ class FileManagerThumbnailsItemList extends FileManagerItemListBase {
         const contextMenuEvent = addNamespace(contextMenuEventName, FILE_MANAGER_THUMBNAILS_EVENT_NAMESPACE);
         eventsEngine.on(this.$element(), contextMenuEvent, this._onContextMenu.bind(this));
 
+        this._lastMouseButton = null;
+        this._storeLastMouseButtonHandler = this._storeLastMouseButton.bind(this);
+        eventsEngine.on(this.$element(), 'pointerdown', this._storeLastMouseButtonHandler);
+
         this._createItemList();
     }
 
+    _storeLastMouseButton(e) {
+        this._lastMouseButton = e.which;
+    }
+
+    _dispose() {
+        eventsEngine.off(this.$element(), 'pointerdown', this._storeLastMouseButtonHandler);
+        super.dispose();
+    }
+
     _createItemList() {
         const selectionMode = this._isMultipleSelectionMode() ? 'multiple' : 'single';
 
@@ -47,6 +60,7 @@ class FileManagerThumbnailsItemList extends FileManagerItemListBase {
             itemThumbnailTemplate: this._getItemThumbnailContainer.bind(this),
             getTooltipText: this._getTooltipText.bind(this),
             onSelectionChanged: this._onItemListSelectionChanged.bind(this),
+            onFocusedElement: this._onItemListFocusedElement.bind(this),
             onFocusedItemChanged: this._onItemListFocusedItemChanged.bind(this),
             onContentReady: this._onContentReady.bind(this)
         });
@@ -140,6 +154,12 @@ class FileManagerThumbnailsItemList extends FileManagerItemListBase {
         });
     }
 
+    _onItemListFocusedElement(args) {
+        // Do not focus the element when the right mouse button is pressed.
+        args.shouldFocusElement = this._lastMouseButton !== 3;
+        this._lastMouseButton = null;
+    }
+
     _onItemListFocusedItemChanged({ item, itemElement }) {
         if(!this._isMultipleSelectionMode()) {
             this._selectItemSingleSelection(item);

packages/devextreme/js/ui/file_manager/ui.file_manager.items_list.thumbnails.list_box.js

@@ -49,7 +49,8 @@ class FileManagerThumbnailListBox extends CollectionWidget {
     _initActions() {
         this._actions = {
             onItemEnterKeyPressed: this._createActionByOption('onItemEnterKeyPressed'),
-            onFocusedItemChanged: this._createActionByOption('onFocusedItemChanged')
+            onBeforeFocusedItemChanged: this._createActionByOption('onBeforeFocusedItemChanged'),
+            onFocusedElement: this._createActionByOption('onFocusedElement')
         };
     }
 
@@ -421,6 +422,16 @@ class FileManagerThumbnailListBox extends CollectionWidget {
         this._actions.onFocusedItemChanged(args);
     }
 
+    _raiseFocusedElement() {
+        const args = {
+            shouldFocusElement: true
+        };
+
+        this._actions.onFocusedElement(args);
+
+        return args;
+    }
+
     _changeItemSelection(item, select) {
         if(this.isItemSelected(item) === select) {
             return;
@@ -493,6 +504,12 @@ class FileManagerThumbnailListBox extends CollectionWidget {
             case 'onFocusedItemChanged':
                 this._actions[args.name] = this._createActionByOption(args.name);
                 break;
+            case 'focusedElement':
+                const res = this._raiseFocusedElement();
+                if(res.shouldFocusElement) {
+                    super._optionChanged(args);
+                }
+                break;
             default:
                 super._optionChanged(args);
         }

packages/testcafe-models/fileManager/index.ts

@@ -0,0 +1,45 @@
+import Widget from '../internal/widget';
+import type { WidgetName } from '../types';
+
+const CLASS = {
+  focused: 'dx-state-focused',
+  scrollable: 'dx-scrollable',
+  scrollableContainer: 'dx-scrollable-container',
+  thumbnailsViewPort: 'dx-filemanager-thumbnails-view-port',
+  thumbnailItem: 'dx-filemanager-thumbnails-item',
+  toolbar: 'dx-filemanager-toolbar',
+  toolbarViewModeItem: 'dx-filemanager-toolbar-viewmode-item',
+};
+
+export default class FileManager extends Widget {
+  // eslint-disable-next-line class-methods-use-this
+  getName(): WidgetName { return 'dxFileManager'; }
+
+  getThumbnailsViewPort() {
+    return this.element.find(`.${CLASS.thumbnailsViewPort}`);
+  }
+
+  getThumbnailsViewScrollable() {
+    return this.getThumbnailsViewPort().find(`.${CLASS.scrollable}`);
+  }
+
+  getThumbnailsViewScrollableContainer() {
+    return this.getThumbnailsViewScrollable().find(`.${CLASS.scrollableContainer}`);
+  }
+
+  getThumbnailsItems() {
+    return this.element.find(`.${CLASS.thumbnailItem}`);
+  }
+
+  isThumbnailItemFocused(index: number) {
+     return this.getThumbnailsItems().nth(index).hasClass(CLASS.focused);
+  }
+
+  getToolbar() {
+    return this.element.find(`.${CLASS.toolbar}`);
+  }
+
+  getToolbarViewModeItem() {
+    return this.getToolbar().find(`.${CLASS.toolbarViewModeItem}`);
+  }
+}