NG1759 - Fixed selected filters being cleared when changing row size

docs/CHANGELOG.md

@@ -20,6 +20,7 @@
 - `[Datagrid]` Fixed a bug where text is misaligned in action dropdown . ([#8957](https://github.com/infor-design/enterprise-ng/issues/8957))
 - `[Datagrid]` Fixed auto sizing on columns in tree grid. ([#8646](https://github.com/infor-design/enterprise/issues/8646))
 - `[Datagrid]` Fixed special characters being encoded in editor. ([#8963](https://github.com/infor-design/enterprise/issues/8963))
+- `[Datagrid]` Fixed selected filters being cleared when changing row size. ([NG#1759](https://github.com/infor-design/enterprise-ng/issues/1759))
 - `[General]` Upgrade dependencies, this involved updating sass and test dependencies with a few css deprecations that were fixed. ([#8947](https://github.com/infor-design/enterprise-ng/issues/8947))
 - `[Locale]` Fixed translation issue of `small` into Spanish. ([#8962](https://github.com/infor-design/enterprise-wc/issues/8962)
 - `[Locale]` Fixed translation issue of `Available` into Thai and Italian. ([#8786](https://github.com/infor-design/enterprise-wc/issues/8786)

src/components/datagrid/datagrid.js

@@ -1839,7 +1839,10 @@ Datagrid.prototype = {
             isRangeDefault = true;
           }
 
-          filterMarkup += `<input ${col.filterDisabled ? ' disabled' : ''} type="text" class="datepicker" ${isRangeDefault ? 'data-options="{range: {useRange: true}}"' : ''} ${attrs} ${enterKeyHint}/>`;
+          filterMarkup += `<input ${col.filterDisabled ? ' disabled' : ''} type="text" class="datepicker"
+            ${columnDef.filterValue ? ` value="${columnDef.filterValue}"` : ''}
+            ${isRangeDefault ? ' data-options="{range: {useRange: true}}"' : ''}
+             ${attrs} ${enterKeyHint}/>`;
           break;
         }
         case 'integer': {
@@ -1865,7 +1868,7 @@ Datagrid.prototype = {
             col.maskOptions = utils.extend(true, {}, integerDefaults, col.maskOptions);
           }
 
-          filterMarkup += `<input${col.filterDisabled ? ' disabled' : ''} type="text" ${attrs} ${enterKeyHint} />`;
+          filterMarkup += `<input${col.filterDisabled ? ' disabled' : ''} type="text" ${columnDef.filterValue ? `value="${columnDef.filterValue}"` : ''} ${attrs} ${enterKeyHint} />`;
           break;
         }
         case 'percent':
@@ -1917,18 +1920,33 @@ Datagrid.prototype = {
             }
           }
 
-          filterMarkup += `<input${col.filterDisabled ? ' disabled' : ''} type="text" ${attrs} ${enterKeyHint} />`;
+          filterMarkup += `<input${col.filterDisabled ? ' disabled' : ''} type="text" ${columnDef.filterValue ? `value="${columnDef.filterValue}"` : ''} ${attrs} ${enterKeyHint} />`;
           break;
         }
         case 'contents':
+          filterMarkup += `<select ${attrs} ${col.filterType === 'select' ? 'class="dropdown"' : 'multiple class="multiselect"'}${col.filterDisabled ? ' disabled' : ''}>${emptyOption}`;
+          if (filterOptions) {
+            for (let i = 0, l = filterOptions.length; i < l; i++) {
+              const option = filterOptions[i];
+              const optionValue = col.caseInsensitive && typeof option.value === 'string' ? option.value.toLowerCase() : option.value;
+              const isSelected = columnDef.filterValue && columnDef.filterValue.some(f => f === optionValue);
+
+              if (option && optionValue !== '') {
+                filterMarkup += `<option value = "${optionValue}" ${isSelected ? 'selected' : ''}>${option.label}</option>`;
+              }
+            }
+          }
+          filterMarkup += '</select><div class="dropdown-wrapper"><div class="dropdown"><span></span></div><svg class="icon" focusable="false" aria-hidden="true" role="presentation"><use href="#icon-dropdown"></use></svg></div>';
+
+          break;
         case 'select':
           filterMarkup += `<select ${attrs} ${col.filterType === 'select' ? 'class="dropdown"' : 'multiple class="multiselect"'}${col.filterDisabled ? ' disabled' : ''}>${emptyOption}`;
           if (filterOptions) {
             for (let i = 0, l = filterOptions.length; i < l; i++) {
               const option = filterOptions[i];
               const optionValue = col.caseInsensitive && typeof option.value === 'string' ? option.value.toLowerCase() : option.value;
               if (option && optionValue !== '') {
-                filterMarkup += `<option value = "${optionValue}">${option.label}</option>`;
+                filterMarkup += `<option value = "${optionValue}" ${optionValue === columnDef.filterValue ? 'selected' : ''}>${option.label}</option>`;
               }
             }
           }
@@ -1941,22 +1959,24 @@ Datagrid.prototype = {
             for (let i = 0, l = filterOptions.length; i < l; i++) {
               const option = filterOptions[i];
               const optionValue = col.caseInsensitive && typeof option.value === 'string' ? option.value.toLowerCase() : option.value;
+              const isSelected = columnDef.filterValue && columnDef.filterValue.some(f => f === optionValue);
+
               if (option && typeof option.label === 'string') {
-                filterMarkup += `<option value = "${optionValue}">${option.label}</option>`;
+                filterMarkup += `<option value = "${optionValue}" ${isSelected ? 'selected' : ''}>${option.label}</option>`;
               }
             }
           }
           filterMarkup += '</select><div class="dropdown-wrapper"><div class="dropdown"><span></span></div><svg class="icon" focusable="false" aria-hidden="true" role="presentation"><use href="#icon-dropdown"></use></svg></div>';
 
           break;
         case 'time':
-          filterMarkup += `<input ${col.filterDisabled ? ' disabled' : ''} type="text" class="timepicker" ${attrs} ${enterKeyHint}/>`;
+          filterMarkup += `<input ${col.filterDisabled ? ' disabled' : ''} type="text" class="timepicker" ${columnDef.filterValue ? `value="${columnDef.filterValue}"` : ''} ${attrs} ${enterKeyHint}/>`;
           break;
         case 'lookup':
-          filterMarkup += `<input ${col.filterDisabled ? ' disabled' : ''} type="text" class="lookup" ${attrs} ${enterKeyHint} >`;
+          filterMarkup += `<input ${col.filterDisabled ? ' disabled' : ''} type="text" class="lookup" ${columnDef.filterValue ? `value="${columnDef.filterValue}"` : ''} ${attrs} ${enterKeyHint} >`;
           break;
         default:
-          filterMarkup += `<input${col.filterDisabled ? ' disabled' : ''} tabindex="0" type="text" ${attrs} ${enterKeyHint}/>`;
+          filterMarkup += `<input${col.filterDisabled ? ' disabled' : ''} tabindex="0" type="text" ${columnDef.filterValue ? `value="${columnDef.filterValue}"` : ''} ${attrs} ${enterKeyHint}/>`;
           break;
       }
 
@@ -2156,6 +2176,7 @@ Datagrid.prototype = {
           // Wierd Hack - Sync to "sync" up the filter row
           const ddElem = $(this);
           $(`#${ddElem.attr('id')}`).val(ddElem.val());
+          delete col.filterValue;
           self.applyFilter(null, 'selected');
         });
 
@@ -2944,6 +2965,11 @@ Datagrid.prototype = {
       this.setSearchActivePage(pagingInfo);
     }
 
+    conditions.forEach((condition) => {
+      const index = self.settings.columns.findIndex(col => col.id === condition.columnId);
+      self.settings.columns[index].filterValue = condition.value;
+    });
+
     /**
     * Fires after a filter action ocurs
     * @event filtered
@@ -2957,8 +2983,8 @@ Datagrid.prototype = {
     if (this.settings.disableClientFilter && trigger === 'restore') {
       return;
     }
-
     this.element.trigger('filtered', { op: 'apply', conditions, trigger });
+
     this.saveUserSettings();
   },
 

tests/datagrid/datagrid.spec.js

@@ -3,9 +3,11 @@ import percySnapshot from '@percy/playwright';
 import { expect } from '@playwright/test';
 import { test } from '../base-fixture';
 
+const datagridUrl = '/components/datagrid/';
+
 test.describe('Datagrid tests', () => {
   test.describe('Index page tests', () => {
-    const url = '/components/datagrid/example-index.html';
+    const url = `${datagridUrl}example-index.html`;
 
     test.beforeEach(async ({ page }) => {
       await page.goto(url);
@@ -37,7 +39,7 @@ test.describe('Datagrid tests', () => {
 
     test.describe('functionality tests', () => {
       test('should be able to disable selection with readonly checkboxes', async ({ page }) => {
-        await page.goto('/components/datagrid/example-disabled-selection-checkbox.html');
+        await page.goto(`${datagridUrl}example-disabled-selection-checkbox.html`);
         await page.locator('.datagrid tr:first-child td:first-child').click();
         expect(await page.locator('.selection-count')).toHaveText('0 Selected');
         await page.locator('.datagrid tr:first-child td:nth-child(6)').click();
@@ -47,7 +49,7 @@ test.describe('Datagrid tests', () => {
   });
 
   test.describe('Expandable row page tests', () => {
-    const url = '/components/datagrid/example-expandable-row.html';
+    const url = `${datagridUrl}example-expandable-row.html`;
 
     test.beforeEach(async ({ page }) => {
       await page.goto(url);
@@ -82,7 +84,7 @@ test.describe('Datagrid tests', () => {
   });
 
   test.describe('Inline editor page tests', () => {
-    const url = '/components/datagrid/test-editable-with-inline-editor.html';
+    const url = `${datagridUrl}test-editable-with-inline-editor.html`;
 
     test.beforeEach(async ({ page }) => {
       await page.goto(url);
@@ -103,8 +105,35 @@ test.describe('Datagrid tests', () => {
     });
   });
 
+  test.describe('Filter header page tests', () => {
+    const url = `${datagridUrl}example-filter.html`;
+
+    test.beforeEach(async ({ page }) => {
+      await page.goto(url);
+    });
+
+    test.describe('filter header tests', () => {
+      test('filter value should stay on changing row height', async ({ page }) => {
+        const val = '1';
+        const input = page.locator('#custom-id-filter-id');
+        const moreBtn = page.locator('#custom-id-actions');
+
+        await input.click();
+        await input.fill(val);
+        await page.keyboard.press('Enter');
+        await moreBtn.click();
+
+        const li = page.locator('ul.is-open > li.is-selectable:not(.is-checked)');
+
+        await li.nth(0).click();
+
+        await expect(input).toHaveValue(val);
+      });
+    });
+  });
+
   test.describe('datagrid toolbar button tests', () => {
-    const url = '/components/datagrid/example-mixed-selection.html';
+    const url = `${datagridUrl}example-mixed-selection.html`;
 
     test.beforeEach(async ({ page }) => {
       await page.goto(url);