DataGrid - Column Header filter does not properly work if the column …

…caption contains double quotes (T1251768) (#28120)
DevExpress · Sep 30, 2024 · fb98542 · fb98542
1 parent 663a1e6
commit fb98542
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 1 deletion.
diff --git a/packages/devextreme/js/ui/shared/accessibility.js b/packages/devextreme/js/ui/shared/accessibility.js
@@ -71,7 +71,8 @@ function getActiveAccessibleElements(ariaLabel, viewElement) {
     let $activeElements;
 
     if(ariaLabel) {
-        $activeElements = $viewElement.find(`[aria-label="${ariaLabel}"][tabindex]`);
+        const escapedAriaLabel = ariaLabel?.replace(/"/g, '\\"');
+        $activeElements = $viewElement.find(`[aria-label="${escapedAriaLabel}"][tabindex]`);
     } else {
         $activeElements = $viewElement.find('[tabindex]');
     }

diff --git a/...fe/tests/dataGrid/headerFilter/etalons/T1251768-header-filter-double-quotes.png b/...fe/tests/dataGrid/headerFilter/etalons/T1251768-header-filter-double-quotes.png
diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/headerFilter/headerFilter.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/headerFilter/headerFilter.ts
@@ -168,3 +168,28 @@ test('Header filter should support string height and width', async (t) => {
     width: '330px',
   },
 }));
+
+test('DataGrid - Column Header filter does not properly work if the column caption contains double quotes (T1251768)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(GRID_CONTAINER);
+  const filterIconElement = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).getFilterIcon();
+
+  await t
+    .click(filterIconElement)
+    .expect(await takeScreenshot('T1251768-header-filter-double-quotes.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 1),
+  headerFilter: {
+    visible: true,
+  },
+  columns: [
+    {
+      dataField: 'Position',
+      caption: '"סה"כ שולם"',
+    },
+    'FirstName',
+  ],
+}));