CardView - ContextMenu position is wrong after opening from the keyboard (#30169)

Author: Raushen

e2e/testcafe-devextreme/tests/cardView/contextMenu/behavior.visual.ts

@@ -0,0 +1,63 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import { ClientFunction } from 'testcafe';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+import { testScreenshot } from '../../../helpers/themeUtils';
+
+fixture.disablePageReloads`CardView - ContextMenu Behavior`
+  .page(url(__dirname, '../../container.html'));
+
+test('Context menu should be shown at the mouse cursor', async (t) => {
+  const cardView = new CardView('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await t
+    .rightClick(cardView.getHeaders().getHeaderItemNth(0).element, { offsetX: -10, offsetY: -10 });
+
+  await testScreenshot(t, takeScreenshot, 'card-view_context-menu_mouse-click_position.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxCardView', {
+    dataSource: [{ ID: 1 }],
+  });
+});
+
+export const triggerCustomContextMenu = ClientFunction((selector) => {
+  const element = selector() as Element;
+
+  const rect = element.getBoundingClientRect();
+  const xPosition = rect.left + rect.width / 2;
+  const yPosition = rect.top + rect.height / 2;
+
+  const event = new MouseEvent('contextmenu');
+  /*
+    Note: By default, TestCafe sets the pageX and pageY properties of MouseEvent to 0.
+    There is no supported way to define custom pageX and pageY values for the contextmenu event.
+    Additionally, TestCafe does not support system keys, so triggering combinations like Shift+F10
+    or the Context Menu key is not possible.
+  */
+  Object.defineProperty(event, 'pageX', { value: xPosition });
+  Object.defineProperty(event, 'pageY', { value: yPosition });
+
+  element.dispatchEvent(event as any);
+});
+
+test('Context menu should be shown at center of the header item if shown with the keyboard', async (t) => {
+  const cardView = new CardView('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await triggerCustomContextMenu(cardView.getHeaders().getHeaderItemNth(0).element);
+  await testScreenshot(t, takeScreenshot, 'card-view_context-menu_keyboard_position.png', { element: cardView.element });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxCardView', {
+    dataSource: [{ ID: 1 }],
+  });
+});

e2e/testcafe-devextreme/tests/cardView/contextMenu/etalons/card-view_context-menu_keyboard_position (fluent-blue-light).png

@@ -164,14 +164,6 @@ export class HeaderPanel extends Component<HeaderPanelProps> {
                             () => ref.current?.focus(),
                           );
                         },
-                        'F10+shift': (event, ref) => {
-                          this.props.showContextMenu(
-                            event,
-                            column,
-                            idx,
-                            () => ref.current?.focus(),
-                          );
-                        },
                       }}
                       caughtEventPreventDefault={true}
                       onSortClick={(event): void => {
@@ -180,8 +172,13 @@ export class HeaderPanel extends Component<HeaderPanelProps> {
                       onFilterClick={(element: Element) => {
                         this.props.onHeaderFilterOpen?.(element, column);
                       }}
-                      onContextMenu={(event) => {
-                        this.props.showContextMenu(event, column, idx);
+                      onContextMenu={(event, ref) => {
+                        this.props.showContextMenu(
+                          event,
+                          column,
+                          idx,
+                          () => ref?.focus(),
+                        );
                       }}
                     />
                   </div>

e2e/testcafe-devextreme/tests/cardView/contextMenu/etalons/card-view_context-menu_keyboard_position (generic-light).png

@@ -54,7 +54,7 @@ export interface ItemProps {
   onKeyDown?: (event: KeyboardEvent) => void;
   onSortClick?: (event: MouseEvent) => void;
   onFilterClick?: (element: Element) => void;
-  onContextMenu?: (event: MouseEvent) => void;
+  onContextMenu?: (event: MouseEvent, ref: HTMLDivElement) => void;
 }
 
 export class Item extends Component<ItemProps> {
@@ -96,7 +96,7 @@ export class Item extends Component<ItemProps> {
         aria-label={ariaLabel}
         onClick={this.props.onSortClick}
         onKeyDown={this.props.onKeyDown}
-        onContextMenu={this.props.onContextMenu}
+        onContextMenu={this.onContextMenuHandler}
       >
         {icon}
         {Template && <Template column={this.props.column}/>}
@@ -130,4 +130,10 @@ export class Item extends Component<ItemProps> {
       this.props.onFilterClick?.(this.props.elementRef.current);
     }
   };
+
+  private readonly onContextMenuHandler = (event: MouseEvent): void => {
+    if (this.props.elementRef?.current) {
+      this.props.onContextMenu?.(event, this.props.elementRef.current);
+    }
+  };
 }