Scheduler: Restore recurrence appointment focus after edit recurrence appointment popup closed (#31135)

Author: sjbur

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/popup.ts

@@ -118,6 +118,14 @@ export class PopupModel {
     return cancelButton;
   };
 
+  getCloseButton = (): HTMLButtonElement => {
+    const closeButton = this.element.querySelector('.dx-closebutton.dx-button') as HTMLButtonElement;
+    if (!closeButton) {
+      throw new Error('Close button not found');
+    }
+    return closeButton;
+  };
+
   getFormEditor = (fieldName: string): HTMLElement | null => {
     const form = this.getForm();
     if (form === null) {

packages/devextreme/js/__internal/scheduler/m_recurrence_focus.integration.test.ts

@@ -0,0 +1,39 @@
+import {
+  afterEach, describe, expect, it, jest,
+} from '@jest/globals';
+
+import { createScheduler } from './__tests__/__mock__/create_scheduler';
+import { setupSchedulerTestEnvironment } from './__tests__/__mock__/m_mock_scheduler';
+
+describe('Recurrence focus restore', () => {
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should restore focus on appointment after closing recurrence dialog and allow reopening with Enter', async () => {
+    setupSchedulerTestEnvironment();
+
+    const { POM, keydown } = await createScheduler({
+      timeZone: 'Etc/UTC',
+      dataSource: [{
+        text: 'Recurring meeting',
+        startDate: new Date('2021-02-02T09:00:00.000Z'),
+        endDate: new Date('2021-02-02T10:00:00.000Z'),
+        recurrenceRule: 'FREQ=DAILY',
+      }],
+      currentDate: new Date('2021-02-02T10:00:00.000Z'),
+    });
+    jest.useFakeTimers();
+
+    const appointment = POM.getAppointment('Recurring meeting');
+    const appointmentEl = appointment.element as HTMLElement;
+
+    appointmentEl.focus();
+    keydown(appointmentEl, 'Enter');
+
+    POM.popup.getCloseButton().click();
+    jest.runAllTimers();
+
+    expect(appointmentEl.classList.contains('dx-state-focused')).toBe(true);
+  });
+});

packages/devextreme/js/__internal/scheduler/m_scheduler.ts

@@ -1583,6 +1583,9 @@ class Scheduler extends SchedulerOptionsBaseWidget {
       ],
       popupOptions: {
         wrapperAttr: { class: POPUP_DIALOG_CLASS },
+        onHidden: () => {
+          this._appointments?.focus();
+        },
       },
     } as any);
 

packages/devextreme/js/__internal/ui/dialog.ts

@@ -11,6 +11,7 @@ import { getHeight, getWidth } from '@js/core/utils/size';
 import { isDefined, isPlainObject } from '@js/core/utils/type';
 import { value as getViewport } from '@js/core/utils/view_port';
 import { getWindow } from '@js/core/utils/window';
+import type { EventInfo } from '@js/events';
 import type { ClickEvent, Properties as ButtonProperties } from '@js/ui/button';
 import type {
   alert as alertFunc,
@@ -152,10 +153,6 @@ export const custom = (params: DialogParams): BaseDialog => {
     eventsEngine.trigger($firstButton, 'focus');
   };
 
-  const onHidden: PopupProperties['onHidden'] = (e) => {
-    $(e.element).remove();
-  };
-
   const animation = {
     show: {
       type: 'pop',
@@ -240,7 +237,6 @@ export const custom = (params: DialogParams): BaseDialog => {
     height: 'auto',
     ignoreChildEvents: false,
     onContentReady,
-    onHidden,
     onHiding: (): void => { deferred.reject(); },
     onShowing,
     onShown,
@@ -258,6 +254,10 @@ export const custom = (params: DialogParams): BaseDialog => {
   const options = {
     ...configuration,
     ...popupOptions,
+    onHidden: (e: EventInfo<Popup>): void => {
+      $(e.element).remove();
+      popupOptions?.onHidden?.(e);
+    },
   };
 
   // @ts-expect-error Incorrect constructor usage