dimsum-e2e-tests 3.70.0-next.57 → 3.70.0-next.59

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.70.0-next.59 (2026-08-12)
+
+### Features
+
+- dimsum:: analysis of size for date-time-input and data-table [PUI-18345](https://jira.elliemae.io/browse/PUI-18345) ([#8285](https://git.elliemae.io/platform-ui/dimsum/issues/8285)) ([70cd13f](https://git.elliemae.io/platform-ui/dimsum/commit/70cd13f8e4f928805fdd8ec7dff1f0042d33abdb))
+
+## [3.70.0-next.58](https://git.elliemae.io/platform-ui/dimsum/compare/v3.70.0-next.57...v3.70.0-next.58) (2026-08-11)
+
+**Note:** Version bump only for package dimsum-e2e-tests
+
 ## [3.70.0-next.57](https://git.elliemae.io/platform-ui/dimsum/compare/v3.70.0-next.56...v3.70.0-next.57) (2026-08-11)
 
 **Note:** Version bump only for package dimsum-e2e-tests

package/ds-autocomplete/DSAutocompleteCO.js

@@ -14,6 +14,14 @@ export default class DSAutocompleteCO extends PageObject {
 
   static floatingAfterFiltering = new Urlbuilder(PATH_E2E_AUTOCOMPLETE, 'floating-after-filtering');
 
+  static loadingTest = new Urlbuilder(PATH_E2E_AUTOCOMPLETE, 'loading-test');
+
+  static skeletonTest = new Urlbuilder(PATH_E2E_AUTOCOMPLETE, 'skeleton-test');
+
+  static loadingInputProps = new Urlbuilder(PATH_E2E_AUTOCOMPLETE, 'loading-input-props-test');
+
+  static skeletonInputProps = new Urlbuilder(PATH_E2E_AUTOCOMPLETE, 'skeleton-input-props-test');
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Autocomplete', example);
@@ -37,8 +45,10 @@ export default class DSAutocompleteCO extends PageObject {
     return $$('[data-dimsum-slot="dsAutocompleteContainer"]')[index];
   }
 
+  // the option is a nested slot: the rendered element owns dsMenuitemMenuItemWrapper and carries the
+  // autocomplete slot on data-dimsum-parent-slot, which is where the custom attributes land
   static async getOptionSlot(index = 0) {
-    return $$('[data-dimsum-slot="dsAutocompleteOption"]')[index];
+    return $$('[data-dimsum-parent-slot="dsAutocompleteOption"]')[index];
   }
 
   static async getInputSlot(index = 0) {
@@ -48,4 +58,27 @@ export default class DSAutocompleteCO extends PageObject {
   static async getMenulistSlot(index = 0) {
     return $$('[data-dimsum-slot="dsAutocompleteMenuList"]')[index];
   }
+
+  // loading / skeleton (busy listbox) states
+  static async getLoadingListbox() {
+    return $('[data-testid="autocomplete-loading"]');
+  }
+
+  static async getLoadingIndicator() {
+    return $('[data-testid="ds-autocomplete-loading-indicator"]');
+  }
+
+  static async getSkeletonListbox() {
+    return $('[data-testid="autocomplete-skeleton"]');
+  }
+
+  static async getSkeletonMenuItems() {
+    return $$('[data-testid="ds-autocomplete-skeleton-menu-item"]');
+  }
+
+  // the input Autocomplete renders itself (onValueChange / inputProps API); the deprecated
+  // children API renders a consumer-owned DSInputText instead, which carries no autocomplete testid
+  static async getAutocompleteInput() {
+    return $('[data-testid="ds-autocomplete-input"]');
+  }
 }

package/ds-autocomplete/aria-busy-loading/DSAutocomplete.aria-busy-loading.axe-core.func.spec.js

@@ -0,0 +1,50 @@
+import { Key } from 'webdriverio';
+import DSAutocompleteCO from '../DSAutocompleteCO';
+import { axeCoreCheck, type } from '../../helpers';
+
+// Coverage for the loading state added in PUI-17137 ([Autocomplete] Add Support for Loading State).
+// The busy listbox surfaces are the riskiest part for axe: role="listbox" normally requires option
+// children (satisfied via aria-busy) and the spinner's role="status" is a forbidden listbox child
+// (removed from the accessibility tree via aria-hidden). This spec guards both.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18864 - DSAutocomplete:: busy listbox while isLoading -Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAutocompleteCO.loadingTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations while the loading spinner is shown', async () => {
+      await browser.keys(Key.Tab);
+      await type('4');
+
+      const loading = await DSAutocompleteCO.getLoadingListbox();
+      await loading.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-18865 - DSAutocomplete:: busy listbox while isSkeleton -Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAutocompleteCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations while the skeleton menu is shown', async () => {
+      await browser.keys(Key.Tab);
+      await type('4');
+
+      const skeleton = await DSAutocompleteCO.getSkeletonListbox();
+      await skeleton.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-autocomplete/aria-busy-loading/DSAutocomplete.aria-busy-loading.func.spec.js

@@ -0,0 +1,122 @@
+import { Key } from 'webdriverio';
+import DSAutocompleteCO from '../DSAutocompleteCO';
+import { type } from '../../helpers';
+
+// Coverage for the loading state added in PUI-17137 ([Autocomplete] Add Support for Loading State).
+// While options are being fetched the options array is still empty, so LoadingContainer /
+// SkeletonContainer keep the popover open on their own and carry the canonical listbox id +
+// role="listbox" + aria-busy + aria-label. Only one of skeleton / loading / options list is ever
+// mounted at a time, so the listbox id is never duplicated in the DOM.
+//
+// The last two describes exercise the `onValueChange` + `inputProps` API, which is the only path
+// where Autocomplete renders its own input and therefore wires role="combobox" + aria-expanded +
+// aria-controls onto it. The deprecated `children` API (first two describes) renders a
+// consumer-owned input that receives none of those attributes.
+//
+// Pure DOM-attribute assertions -> Chrome-only guard.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18860 - DSAutocomplete:: busy listbox while isLoading -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAutocompleteCO.loadingTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render a busy loading listbox and hide the options list', async () => {
+      await browser.keys(Key.Tab);
+      await type('4');
+
+      const loading = await DSAutocompleteCO.getLoadingListbox();
+      await loading.waitForDisplayed();
+
+      await expect(loading).toHaveAttribute('role', 'listbox');
+      await expect(loading).toHaveAttribute('aria-busy', 'true');
+      await expect(loading).toHaveAttribute('aria-label', 'Loading options please wait');
+
+      // the spinner exposes role="status", a forbidden child of role="listbox", so it must be
+      // removed from the accessibility tree while staying visible
+      const indicator = await DSAutocompleteCO.getLoadingIndicator();
+      await expect(indicator).toBeDisplayedInViewport();
+      await expect(indicator).toHaveAttribute('aria-hidden', 'true');
+
+      // only one of loading / skeleton / options list is mounted at a time
+      const menulist = await DSAutocompleteCO.getAutocompleteMenuList();
+      await expect(menulist).not.toBeExisting();
+    });
+  });
+
+  describe('PUI-18861 - DSAutocomplete:: busy listbox while isSkeleton -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAutocompleteCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render a busy skeleton listbox with five presentational items', async () => {
+      await browser.keys(Key.Tab);
+      await type('4');
+
+      const skeleton = await DSAutocompleteCO.getSkeletonListbox();
+      await skeleton.waitForDisplayed();
+
+      await expect(skeleton).toHaveAttribute('role', 'listbox');
+      await expect(skeleton).toHaveAttribute('aria-busy', 'true');
+      await expect(skeleton).toHaveAttribute('aria-label', 'Loading options please wait');
+
+      const skeletonItems = await DSAutocompleteCO.getSkeletonMenuItems();
+      await expect(skeletonItems).toHaveLength(5);
+      // the count above is what pins SKELETON_AMOUNT; every item is rendered from the same JSX
+      // literal, so one sample is enough to prove role="presentation" reaches the DOM and keeps
+      // the busy listbox free of fake options
+      await expect(skeletonItems[2]).toHaveAttribute('role', 'presentation');
+
+      const menulist = await DSAutocompleteCO.getAutocompleteMenuList();
+      await expect(menulist).not.toBeExisting();
+    });
+  });
+
+  describe('PUI-18862 - DSAutocomplete:: input aria-controls linkage while isLoading -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAutocompleteCO.loadingInputProps.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should point the input aria-controls at the busy loading listbox', async () => {
+      await browser.keys(Key.Tab);
+      await type('4');
+
+      const loading = await DSAutocompleteCO.getLoadingListbox();
+      await loading.waitForDisplayed();
+      const loadingId = await loading.getAttribute('id');
+
+      const input = await DSAutocompleteCO.getAutocompleteInput();
+      await expect(input).toHaveAttribute('role', 'combobox');
+      await expect(input).toHaveAttribute('aria-expanded', 'true');
+      await expect(input).toHaveAttribute('aria-controls', loadingId);
+    });
+  });
+
+  describe('PUI-18863 - DSAutocomplete:: input aria-controls linkage while isSkeleton -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAutocompleteCO.skeletonInputProps.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should point the input aria-controls at the busy skeleton listbox', async () => {
+      await browser.keys(Key.Tab);
+      await type('4');
+
+      const skeleton = await DSAutocompleteCO.getSkeletonListbox();
+      await skeleton.waitForDisplayed();
+      const skeletonId = await skeleton.getAttribute('id');
+
+      const input = await DSAutocompleteCO.getAutocompleteInput();
+      await expect(input).toHaveAttribute('role', 'combobox');
+      await expect(input).toHaveAttribute('aria-expanded', 'true');
+      await expect(input).toHaveAttribute('aria-controls', skeletonId);
+    });
+  });
+}

package/ds-autocomplete/aria-busy-loading/DSAutocomplete.aria-busy-loading.visual.spec.js

@@ -0,0 +1,48 @@
+import { Key } from 'webdriverio';
+import DSAutocompleteCO from '../DSAutocompleteCO';
+import { type } from '../../helpers';
+
+// Coverage for the loading state added in PUI-17137 ([Autocomplete] Add Support for Loading State).
+// The acceptance criteria is the loading example from the InputText spec, so these snapshots pin the
+// two menu appearances: the centered indeterminate spinner and the five skeleton menu items.
+// Percy freezes CSS animations, so both the spinner rotation and the skeleton shimmer are captured
+// deterministically.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18866 - DSAutocomplete:: loading spinner menu -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAutocompleteCO.loadingTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display the loading spinner centered in the menu', async () => {
+      await browser.keys(Key.Tab);
+      await type('4');
+
+      const loading = await DSAutocompleteCO.getLoadingListbox();
+      await loading.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSAutocompleteCO.snapshotPath('autocomplete-loading-spinner-menu'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-18867 - DSAutocomplete:: skeleton menu items -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSAutocompleteCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display five skeleton menu items in the menu', async () => {
+      await browser.keys(Key.Tab);
+      await type('4');
+
+      const skeleton = await DSAutocompleteCO.getSkeletonListbox();
+      await skeleton.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(DSAutocompleteCO.snapshotPath('autocomplete-skeleton-menu'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-data-table-async/DSDataTableCO.js

@@ -33,6 +33,8 @@ export default class DataTableCO extends PageObject {
 
   static DndColumnsFixedWidth = new Urlbuilder(PATH_E2E_DATATABLE_DND, 'dnd-columns-fixed-width');
 
+  static keyboardDragScroll = new Urlbuilder(PATH_E2E_DATATABLE_DND, 'keyboard-drag-scroll-test');
+
   // Filters
 
   static singleSelect = new Urlbuilder(PATH_E2E_DATATABLE_FILTERS, 'single-select-filter');
@@ -200,10 +202,10 @@ export default class DataTableCO extends PageObject {
     'grouping-with-hidden-and-resizable-columns',
   );
 
+  // PUI-18812 removed the resizerA11yMode prop, so there is one resizer shape and one story. The
+  // "SeparatorMode" name is historical — kept to avoid churning this URL and every spec using it.
   static resizerSeparatorMode = new Urlbuilder(PATH_E2E_DATATABLE_COLUMN, 'resizer-separator-mode-test');
 
-  static resizerSliderMode = new Urlbuilder(PATH_E2E_DATATABLE_COLUMN, 'resizer-slider-mode-test');
-
   // Text Wrapping
 
   static textWrapTruncColumn = new Urlbuilder(PATH_E2E_DATATABLE_TEXT_WRAPPING, 'text-wrap-truncate-column');
@@ -470,6 +472,126 @@ export default class DataTableCO extends PageObject {
       };
     });
 
+  // PUI-15735 — creatable filter aria-activedescendant validity
+
+  /**
+   * Returns the combobox input's aria-activedescendant together with the ids of every option
+   * currently rendered in the listbox, in one round-trip. Valid states are an empty
+   * aria-activedescendant or one whose value appears in optionIds.
+   */
+  static getFilterActiveDescendantState = async () =>
+    browser.execute(() => {
+      const input = document.querySelector('[data-testid="combobox-input"]');
+      const options = Array.from(document.querySelectorAll('[data-testid="combobox-option"]'));
+      return {
+        activeDescendant: input ? input.getAttribute('aria-activedescendant') : null,
+        optionIds: options.map((option) => option.id),
+      };
+    });
+
+  // PUI-8826 — keyboard row drag must not smooth-scroll
+
+  /**
+   * Patches the DOM scroll APIs so every programmatic scroll from this point on records its
+   * `behavior`. dnd-kit calls scrollTo/scrollBy directly on the scroll container's DOM node rather
+   * than through React, so patching the shared prototype captures every call the drag makes.
+   * Install after the story is loaded and before the drag starts.
+   */
+  static installScrollSpy = async () =>
+    browser.execute(() => {
+      window.dimsumScrollCalls = [];
+      ['scrollTo', 'scrollBy'].forEach((methodName) => {
+        const original = Element.prototype[methodName];
+        // A function expression, not an arrow, so `this` stays the scrolled element.
+        Element.prototype[methodName] = function scrollSpy(...args) {
+          const [options] = args;
+          if (options && typeof options === 'object') {
+            window.dimsumScrollCalls.push({ method: methodName, behavior: options.behavior });
+          }
+          return original.apply(this, args);
+        };
+      });
+    });
+
+  static getScrollSpyCalls = async () => browser.execute(() => window.dimsumScrollCalls || []);
+
+  /** Scroll offset of the virtualized viewport — proves the drag actually scrolled the list. */
+  static getScrollableContainerScrollTop = async () =>
+    browser.execute(() => {
+      const container = document.querySelector('[data-testid="data-table-scrollable-container"]');
+      return container ? container.scrollTop : null;
+    });
+
+  /** Id-cell text of whichever row currently owns focus — the dragged row after a keyboard drop. */
+  static getFocusedRowIdCellText = async () =>
+    browser.execute(() => {
+      const active = document.activeElement;
+      const row = active && active.closest ? active.closest('[data-testid="data-table-row"]') : null;
+      const cells = row ? row.querySelectorAll('[data-testid="data-table-cell"]') : [];
+      // Cell 0 is the drag-handle cell; the id column follows it.
+      return cells.length > 1 ? cells[1].textContent.trim() : null;
+    });
+
+  // PUI-17187 — filter popover clamped to the table's own scrollport during horizontal scroll
+
+  /**
+   * Horizontal-scroll geometry of one column, read live instead of hardcoded. Returns the header
+   * cell's offset range inside the scrolled content plus the scrollport's own width, which is what
+   * the two scroll targets are derived from: colLeft - clientWidth + a sliver still leaves the
+   * column partially visible at the left edge, while colRight puts it fully out of view. Fixed-layout
+   * column widths shift with viewport and theme, so a hardcoded scrollLeft would be silently wrong
+   * on another browser or breakpoint.
+   */
+  static getColumnScrollGeometry = async (columnName) =>
+    browser.execute((name) => {
+      const container = document.querySelector('[data-testid="data-table-scrollable-container"]');
+      const headers = Array.from(document.querySelectorAll('[data-testid="data-table-header"]'));
+      const target = headers.find((header) => (header.textContent || '').toLowerCase().includes(name.toLowerCase()));
+      if (!container || !target) return null;
+      // Derived from bounding rects plus the CURRENT scrollLeft, not offsetLeft/offsetWidth:
+      // offsetLeft is measured against the nearest positioned ancestor, which is not guaranteed to
+      // be the scrolled content, so it silently yields the wrong scroll target. This form is exact
+      // regardless of which ancestor happens to be positioned.
+      const targetRect = target.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const colLeft = targetRect.left - containerRect.left + container.scrollLeft;
+      return {
+        colLeft,
+        colRight: colLeft + targetRect.width,
+        clientWidth: container.clientWidth,
+        maxScrollLeft: container.scrollWidth - container.clientWidth,
+      };
+    }, columnName);
+
+  static setScrollableContainerScrollLeft = async (value) =>
+    browser.execute((next) => {
+      const container = document.querySelector('[data-testid="data-table-scrollable-container"]');
+      if (container) container.scrollLeft = next;
+    }, value);
+
+  /**
+   * Popover and scrollport horizontal bounds in one round-trip, so the two rects are always sampled
+   * from the same frame — reading them separately can straddle a reposition and compare a stale
+   * popover x against a fresh container x.
+   */
+  static getFilterPopoverBoundaryRects = async () =>
+    browser.execute(() => {
+      const popover = document.querySelector('[data-testid="data-table-filter-menu-content"]');
+      const container = document.querySelector('[data-testid="data-table-scrollable-container"]');
+      if (!popover || !container) return null;
+      const popoverRect = popover.getBoundingClientRect();
+      const containerRect = container.getBoundingClientRect();
+      const styles = window.getComputedStyle(popover);
+      return {
+        popoverLeft: popoverRect.left,
+        popoverRight: popoverRect.right,
+        containerLeft: containerRect.left,
+        containerRight: containerRect.right,
+        opacity: styles.opacity,
+        pointerEvents: styles.pointerEvents,
+      };
+    });
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DataTable', example, 'ds-data-table');

package/ds-data-table-async/components/HeaderCO.js

@@ -83,12 +83,27 @@ export default class HeaderCO extends PageObject {
   // as the getResizeHandler selector fix (separate PR); kept distinct so these a11y specs run standalone.
   static getResizer = async (index) => $$('[data-testid="ds-datatable-resizer"]')[index];
 
-  static getResizerAccessibleName = async (resizer) => {
+  /**
+   * Text of the node the resizer's aria-labelledby points at. This is a WIRING check only — it
+   * proves the reference resolves to the intended span, NOT that the browser computes a name from
+   * it. Use getResizerComputedName for that. (The two can disagree: the name span is display:none,
+   * and whether a hidden aria-labelledby target contributes to the computed name is exactly the
+   * thing this must not assume.)
+   */
+  static getResizerLabelledByText = async (resizer) => {
     const labelledById = await resizer.getAttribute('aria-labelledby');
     if (!labelledById) return null;
     return (await $(`#${labelledById}`)).getProperty('textContent');
   };
 
+  /**
+   * The accessible name the BROWSER computes for the resizer, via the W3C WebDriver
+   * "Get Computed Label" endpoint — the accname algorithm's real output, not a re-implementation.
+   * Only meaningful while the handle is exposed: at rest it is aria-hidden, so it is outside the
+   * accessibility tree and has no computed name by design.
+   */
+  static getResizerComputedName = async (resizer) => resizer.getComputedLabel();
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DataTable', example, 'ds-data-table');

package/ds-data-table-async/dnd/DSDataTable.dnd-keyboard-scroll.func.spec.js

@@ -0,0 +1,51 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO } from '../components';
+
+// Tests for the fix introduced in PUI-8826. Holding ArrowDown during a keyboard row drag fired
+// dnd-kit's default smooth scroll on every key-repeat keydown, re-targeting the in-flight scroll
+// animation before it settled — this read as the dragged row "flickering". The fix pins the
+// KeyboardSensor to scrollBehavior: 'auto', so repeated keydowns produce instant jumps instead.
+const REPEATED_PRESSES = 15;
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18883 - DSDataTable:: keyboard row drag scroll on held ArrowDown - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.keyboardDragScroll.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+      await DSDataTableCO.installScrollSpy();
+    });
+    it('01: the drag survives a burst of ArrowDown presses', async () => {
+      const dragHandle = await RowCO.getRowDragHlandlerByIndex(0);
+      await dragHandle.click();
+      await browser.keys(Key.Space);
+      await expect(dragHandle).toHaveAttribute('aria-pressed', 'true');
+
+      await DSDataTableCO.pressArrow('down', REPEATED_PRESSES);
+      // Still picked up and still holding focus — the repeat burst neither dropped the row nor
+      // stole focus mid-scroll.
+      await expect(dragHandle).toHaveAttribute('aria-pressed', 'true');
+      await expect(dragHandle).toBeFocused();
+    });
+    it('02: the burst scrolled the viewport and never used behavior "smooth"', async () => {
+      // Sanity first: a 200px viewport over 40 rows means the drag must have scrolled. Without
+      // this the behavior assertion below could pass without exercising the fix at all.
+      const scrollTop = await DSDataTableCO.getScrollableContainerScrollTop();
+      await expect(scrollTop).toBeGreaterThan(0);
+
+      const scrollCalls = await DSDataTableCO.getScrollSpyCalls();
+      await expect(scrollCalls.length).toBeGreaterThan(0);
+      await expect(scrollCalls.every((call) => call.behavior === 'auto')).toBe(true);
+    });
+    it('03: dropping with Space reorders the list and keeps the dragged row focused', async () => {
+      await browser.keys(Key.Space);
+      await expect(await DSDataTableCO.getFocusedRowIdCellText()).toBe('1');
+    });
+  });
+}

package/ds-data-table-async/filter-menu-close/DSDataTable.filter-menu-close.func.spec.js

@@ -1,38 +1,76 @@
-import { mouseOver } from '../../helpers';
 import DSDataTableCO from '../DSDataTableCO';
 import { HeaderCO, FiltersCO } from '../components';
 
-// SKIPPED pending fix for defect PUI-18785: an open per-column filter menu does not close when the
-// user clicks the column header cell or its drag-and-drop handle — the column can even be dragged
-// with the menu open, and the menu drops alongside the column and stays open. These tests capture
-// the EXPECTED behavior (the menu must close on those interactions). Un-skip them once PUI-18785
-// lands, then create the Test ticket and replace PUI-XXXXX.
+// Tests for the fix introduced in PUI-18785 (an open per-column filter menu did not close when the
+// user clicked that column's header cell, grabbed its drag-and-drop handle, or grabbed its resize
+// handle — the filter popover's floating reference is the whole header cell, so the click-outside
+// detection never saw any of those interactions as "outside", and the menu could be dragged around
+// the table while open).
+//
+// The SortByColumn story is the repro combination named in the defect: per-column filters +
+// dragAndDropColumns + isResizeable on the same table.
+//
+// The target is the Country column: it is filterable but canSort is false, so a header click has
+// only the filter to close and never also triggers a sort — the assertions stay about the menu and
+// nothing else. That also makes FiltersCO.openFilterPopperByColumnName safe to use here even though
+// it clicks the header cell to reveal the affordance; hovering instead is not portable, because in
+// Safari the filter button stays aria-hidden/tabindex="-1" and never becomes interactable.
+//
+// Deviation from the ticket, asserted deliberately: PUI-18785's Expected Results asked that a
+// column "should not be draggable while its filter menu is open". The shipped fix instead closes
+// the menu and lets the same single gesture continue into the drag/resize, so these tests assert
+// that shipped behavior — the menu closes, and the interaction is not swallowed just to close it.
+const COUNTRY_COLUMN = 'country';
+const COUNTRY_COLUMN_INDEX = 3;
+
+const openCountryFilterMenu = async () => {
+  await FiltersCO.openFilterPopperByColumnName(COUNTRY_COLUMN);
+  await expect(await FiltersCO.getFilterMenuContent()).toBeDisplayed();
+};
+
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
-  describe.skip('PUI-XXXXX - DSDataTable:: filter menu closes on column header or drag interaction - Func', () => {
+  describe('PUI-18887 - DSDataTable:: filter menu closes on header, drag and resize - Func', () => {
     beforeEach(async () => {
       const errorOnGo = await DSDataTableCO.sortByColumn.go();
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
     });
 
-    it('01: clicking the column drag handle closes an open filter menu', async () => {
-      const idHeader = await HeaderCO.getHeaderCellByIndex(0);
-      await mouseOver(idHeader);
-      await (await HeaderCO.getFilterBtnByIndex(0)).click();
-      await expect(await FiltersCO.getFilterMenuContent()).toBeDisplayed();
+    it('01: clicking the column header closes an open filter menu and keeps the trigger', async () => {
+      await openCountryFilterMenu();
+
+      const countryHeader = await HeaderCO.getHeaderCellByText(COUNTRY_COLUMN);
+      await countryHeader.click();
 
-      const dragHandle = await HeaderCO.getHeaderCellDragHandler(idHeader);
+      await expect(await FiltersCO.getFilterMenuContent()).not.toBeDisplayed();
+      // Closing the menu must not take its own trigger with it. An over-broad fix that removed the
+      // whole filter affordance would still satisfy the assertion above, so the trigger is checked
+      // explicitly. Existence rather than visibility: the filter button is toggled with display:none
+      // by the header's own affordance logic, so a visibility assertion would be testing that
+      // unrelated hover/active state instead of the fix.
+      const filterBtn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(countryHeader, 0);
+      await expect(filterBtn).toBeExisting();
+    });
+
+    it('02: activating the column drag handle closes an open filter menu', async () => {
+      await openCountryFilterMenu();
+
+      const countryHeader = await HeaderCO.getHeaderCellByText(COUNTRY_COLUMN);
+      const dragHandle = await HeaderCO.getHeaderCellDragHandler(countryHeader);
       await dragHandle.click();
+
       await expect(await FiltersCO.getFilterMenuContent()).not.toBeDisplayed();
     });
 
-    it('02: clicking the column header cell closes an open filter menu', async () => {
-      const idHeader = await HeaderCO.getHeaderCellByIndex(0);
-      await mouseOver(idHeader);
-      await (await HeaderCO.getFilterBtnByIndex(0)).click();
-      await expect(await FiltersCO.getFilterMenuContent()).toBeDisplayed();
+    it('03: grabbing the column resize handle closes an open filter menu', async () => {
+      await openCountryFilterMenu();
+
+      // A real press-move-release on the 4px handle, which is what fires onResizeStart. Asserting
+      // the resize itself is out of scope here — that is PUI-18764's job; this test only proves the
+      // press reaches the resizer and closes the menu.
+      const resizer = await HeaderCO.getResizeHandler(COUNTRY_COLUMN_INDEX);
+      await resizer.dragAndDrop({ x: 30, y: 0 });
 
-      await idHeader.click();
       await expect(await FiltersCO.getFilterMenuContent()).not.toBeDisplayed();
     });
   });