merge with upstream

Author: GoodDayForSurf

apps/demos/Demos/Chat/MessageEditing/description.md

@@ -1,3 +1,8 @@
-In our upcoming major release (v25.1) our Chat component will allow users to edit/delete messages once they’ve been sent. 
+The Chat component allows users to edit and delete sent messages.
+
+Use a [data source](/Documentation/ApiReference/UI_Components/dxChat/Configuration/#dataSource) if you want users to edit and delete messages. Implement custom insert, update, and delete operations. Once you configured these operations, enable [editing](/Documentation/ApiReference/UI_Components/dxChat/Configuration/editing/).
 <!--split-->
-DevExtreme Chat is a client-side component that requires a backend solution. Message editing and delete operations will include relevant UI elements for end users and APIs to modify rendered messages. To edit and remove messages from a data source, you will need to use Push APIs. 
+
+The **editing** object includes [allowUpdating](/Documentation/ApiReference/UI_Components/dxChat/Configuration/editing/#allowUpdating) and [allowDeleting](/Documentation/ApiReference/UI_Components/dxChat/Configuration/editing/#allowDeleting) properties. These Boolean options are initially `false`. You can set them to `true` or use functions with custom logic. When options are `true`, users can edit/delete their own messages.
+
+In this demo, try deleting or editing messages. First, check that the options are active in the panel next to the Chat component. Right-click or long-tap a message to access the "Edit" and "Delete" commands in the context menu. Edit a message in the input field and click "Send" to save changes. 

e2e/testcafe-devextreme/tests/dataGrid/common/headerFilter/headerFilter.ts

@@ -316,3 +316,45 @@ test('[T1284200] Should handle dxList "selectAll" when has unselected items on t
     visible: true,
   },
 }));
+
+test('Header filter search input loses focus on first key in datetime columns (T1284663)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const headerCell = dataGrid.getHeaders()
+    .getHeaderRow(0)
+    .getHeaderCell(0);
+  const filterIconElement = headerCell.getFilterIcon();
+  const headerFilter = new HeaderFilter();
+
+  await t
+    .click(filterIconElement)
+    .pressKey('1');
+
+  await t.wait(1500);
+
+  const searchInput = headerFilter.getSearchInput();
+
+  await t
+    .expect(searchInput.focused)
+    .ok();
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [{
+    id: 1,
+    DeliveryDate: '2017/04/13 9:00',
+  }],
+  headerFilter: {
+    visible: true,
+  },
+  keyExpr: 'id',
+  columns: [{
+    dataField: 'DeliveryDate',
+    dataType: 'date',
+    headerFilter: {
+      dataSource: [
+        { text: 'March 11, 2025', value: '2025-03-11T00:00:00' },
+        { text: 'March 2, 2025', value: '2025-03-02T00:00:00' },
+        { text: 'February 3, 2025', value: '2025-02-03T00:00:00' },
+      ],
+      search: { enabled: true },
+    },
+  }],
+}));

e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/columnReordering.visual.ts

@@ -258,6 +258,36 @@ safeSizeTest('The context menu should not have items for column reordering when
   });
 });
 
+test('The cell focus should be correct after column reordering when previously the data cell was focused', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const firstDataCell = dataGrid.getDataCell(0, 0);
+
+  await t
+    .click(firstDataCell.element)
+    .pressKey('shift+tab')
+    .pressKey('ctrl+left');
+
+  await takeScreenshot(
+    'cell_focus_after_column_reordering_when_data_cell_was_focused.png',
+    dataGrid.element,
+  );
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await createWidget('dxDataGrid', {
+    allowColumnReordering: true,
+    dataSource: [{
+      field1: 'test1',
+      field2: 'test2',
+      field3: 'test3',
+      field4: 'test4',
+    }],
+  });
+});
+
 // Fixed columns
 test('reorder fixed left column to right', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);

e2e/testcafe-devextreme/tests/dataGrid/common/keyboardNavigation/etalons/cell_focus_after_column_reordering_when_data_cell_was_focused.png

@@ -0,0 +1,90 @@
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+import { a11yCheck } from '../../../../helpers/accessibility/utils';
+
+fixture.disablePageReloads`a11y - popup`
+  .page(url(__dirname, '../../../container.html'));
+
+const checkOptions = {
+  rules: {
+    'color-contrast': { enabled: false },
+  },
+};
+
+test('Scheduler edit appointment is accessible', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await t.doubleClick(scheduler.getAppointmentByIndex(0).element());
+  await t.expect(scheduler.appointmentPopup.isVisible()).ok();
+
+  await a11yCheck(t, checkOptions, '#container');
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    timeZone: 'America/Los_Angeles',
+    dataSource: [{
+      text: 'Install New Router in Dev Room',
+      startDate: new Date('2021-03-29T21:30:00.000Z'),
+      endDate: new Date('2021-03-29T22:30:00.000Z'),
+      recurrenceRule: 'FREQ=DAILY',
+    }],
+    recurrenceEditMode: 'series',
+    currentView: 'week',
+    currentDate: new Date(2021, 2, 28),
+  });
+});
+
+test('Scheduler recurrence editor repeat end accessible', async (t) => {
+  const scheduler = new Scheduler('#container');
+  const getItem = (index: number) => scheduler
+    .appointmentPopup
+    .getEndRepeatRadioButton(index);
+  const getAriaLabel = (index: number) => getItem(index)
+    .getAttribute('aria-label');
+
+  await t.doubleClick(scheduler.getAppointmentByIndex(0).element());
+  await t.expect(scheduler.appointmentPopup.isVisible()).ok();
+
+  await t
+    .expect(getAriaLabel(1))
+    .eql('On 22 May 2025')
+    .expect(getAriaLabel(2))
+    .eql('After')
+    .typeText(scheduler.appointmentPopup.repeatUntilElement, '2026')
+    .click(getItem(1)) // unfocus input
+    .expect(getAriaLabel(1))
+    .eql('On 22 May 2026')
+    .expect(getAriaLabel(2))
+    .eql('After');
+  await t
+    .click(getItem(0))
+    .expect(getAriaLabel(1))
+    .eql('On')
+    .expect(getAriaLabel(2))
+    .eql('After');
+  await t
+    .click(getItem(2))
+    .expect(getAriaLabel(1))
+    .eql('On')
+    .expect(getAriaLabel(2))
+    .eql('After 1 occurrence(s)')
+    .typeText(scheduler.appointmentPopup.repeatCountElement, '3')
+    .click(getItem(2)) // unfocus input
+    .expect(getAriaLabel(1))
+    .eql('On')
+    .expect(getAriaLabel(2))
+    .eql('After 13 occurrence(s)');
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    timeZone: 'America/Los_Angeles',
+    dataSource: [{
+      text: 'Install New Router in Dev Room',
+      startDate: new Date('2021-03-29T21:30:00.000Z'),
+      endDate: new Date('2021-03-29T22:30:00.000Z'),
+      recurrenceRule: 'FREQ=DAILY;UNTIL=20250522T215959Z',
+    }],
+    recurrenceEditMode: 'series',
+    currentView: 'week',
+    currentDate: new Date('2021-03-29T21:30:00.000Z'),
+  });
+});

e2e/testcafe-devextreme/tests/scheduler/common/a11y/editing.ts

@@ -26,7 +26,6 @@
 
   &.dx-scrollable-wrapper > .dx-scrollable-container,
   > div.dx-scrollable-wrapper > .dx-scrollable-container {
-    -webkit-overflow-scrolling: touch;
     position: relative;
     height: 100%;
   }

e2e/testcafe-devextreme/tests/scheduler/common/a11y/popup.ts

@@ -2,6 +2,7 @@
 import '@ts/ui/list/modules/m_search';
 import '@ts/ui/list/modules/m_selection';
 
+import type { ChangedOptionInfo } from '@js/common/core/events';
 import messageLocalization from '@js/common/core/localization/message';
 import $ from '@js/core/renderer';
 import type { DeferredObj } from '@js/core/utils/deferred';
@@ -15,6 +16,7 @@ import Popup from '@js/ui/popup/ui.popup';
 import TreeView from '@js/ui/tree_view';
 import Modules from '@ts/grids/grid_core/m_modules';
 import type { ModuleType } from '@ts/grids/grid_core/m_types';
+import type TextBox from '@ts/ui/text_box/m_text_box';
 
 import gridCoreUtils from '../m_utils';
 
@@ -329,24 +331,52 @@ export class HeaderFilterView extends Modules.View {
       },
     };
 
-    function onOptionChanged(e) {
-      // T835492, T833015
-      if (e.fullName === 'searchValue' && needShowSelectAllCheckbox && that.option('headerFilter.hideSelectAllOnSearch') !== false) {
-        if (options.type === 'tree') {
-          e.component.option('showCheckBoxesMode', e.value ? 'normal' : 'selectAll');
-        } else {
-          e.component.option('selectionMode', e.value ? 'multiple' : 'all');
-        }
+    const shouldChangeSelectAllCheckBoxVisibility = (): boolean => needShowSelectAllCheckbox
+      && that.option('headerFilter.hideSelectAllOnSearch') !== false;
+
+    const onTreeViewOptionChanged = (
+      event: ChangedOptionInfo & {
+        component: TreeView & { _searchEditor: TextBox };
+      },
+    ): void => {
+      switch (true) {
+        case event.fullName === 'searchValue' && shouldChangeSelectAllCheckBoxVisibility():
+          event.component.option('showCheckBoxesMode', event.value ? 'normal' : 'selectAll');
+          break;
+        // TODO TreeView: remove this WA after Navigation squad re-render fix
+        // NOTE: WA for TreeView re-render after changing the "showCheckBoxesMode" option
+        // After this option change the whole TreeView re-render and search input loose the focus
+        case event.fullName === 'showCheckBoxesMode':
+          // NOTE: the TreeView render is async
+          // So we should focus the searchEditor only after render will be completed
+          Promise.resolve()
+            .then(() => {
+              event.component._searchEditor.focus();
+            })
+            .catch(() => {});
+          break;
+        default:
+          break;
       }
-    }
+    };
+
+    const onListOptionChanged = (
+      event: ChangedOptionInfo & {
+        component: dxList;
+      },
+    ): void => {
+      if (event.fullName === 'searchValue' && shouldChangeSelectAllCheckBoxVisibility()) {
+        event.component.option('selectionMode', event.value ? 'multiple' : 'all');
+      }
+    };
 
     if (options.type === 'tree') {
       that._listComponent = that._createComponent(
         $('<div>').appendTo($content),
         TreeView,
         extend(widgetOptions, {
           showCheckBoxesMode: needShowSelectAllCheckbox ? 'selectAll' : 'normal',
-          onOptionChanged,
+          onOptionChanged: onTreeViewOptionChanged,
           keyExpr: 'id',
         }),
       );
@@ -359,7 +389,7 @@ export class HeaderFilterView extends Modules.View {
           pageLoadMode: 'scrollBottom',
           showSelectionControls: true,
           selectionMode: needShowSelectAllCheckbox ? 'all' : 'multiple',
-          onOptionChanged,
+          onOptionChanged: onListOptionChanged,
           onSelectionChanged(event) {
             const { component: listComponent } = event;
             const items = listComponent.option('items');

packages/devextreme-scss/scss/widgets/base/scrollable/_index.scss

@@ -232,8 +232,16 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
     }
   }
 
-  protected focusOutHandler(): void {
+  protected focusOutHandler(e): void {
+    const { relatedTarget } = e;
+
     this._toggleInertAttr(false);
+
+    if (relatedTarget && !this.isInsideFocusedView($(relatedTarget))) {
+      this._isNeedFocus = false;
+      this._isHiddenFocus = false;
+      this._isNeedScroll = false;
+    }
   }
 
   protected subscribeToRowsViewFocusEvent(): void {
@@ -1459,10 +1467,8 @@ export class KeyboardNavigationController extends KeyboardNavigationControllerCo
     }
   }
 
-  private _getFocusedViewByElement($element) {
-    const $view = $(this._focusedView?.element());
-
-    return $element?.closest($view).length !== 0;
+  private isInsideFocusedView($element: dxElementWrapper): boolean {
+    return $element.closest(this._focusedView?.element()).length !== 0;
   }
 
   private _focusView() {

packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts

@@ -28,8 +28,8 @@ export const keyboardNavigationScrollableA11yExtender = (Base: ModuleType<Keyboa
     super.focusinHandler(event);
   }
 
-  protected focusOutHandler(): void {
-    super.focusOutHandler();
+  protected focusOutHandler(e): void {
+    super.focusOutHandler(e);
     this.makeScrollableFocusableIfNeed();
   }