feat(editors): add a Clear (X) button to the Autocomplete Editor (#270)

examples/webpack-demo-vanilla-bundle/package.json

@@ -39,12 +39,12 @@
     "@types/webpack": "^4.41.26",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^7.0.0",
-    "css-loader": "^5.0.2",
+    "css-loader": "^5.1.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.1.0",
     "html-loader": "^2.1.1",
     "html-webpack-plugin": "5.2.0",
-    "mini-css-extract-plugin": "^1.3.8",
+    "mini-css-extract-plugin": "^1.3.9",
     "node-sass": "5.0.0",
     "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
@@ -55,4 +55,4 @@
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"
   }
-}
+}

examples/webpack-demo-vanilla-bundle/src/examples/example12.ts

@@ -186,6 +186,7 @@ export class Example12 {
         type: FieldType.number,
         sortable: true, filterable: true, columnGroup: 'Analysis',
         formatter: (_row, _cell, value) => this.complexityLevelList[value].label,
+        exportCustomFormatter: (_row, _cell, value) => this.complexityLevelList[value].label,
         filter: {
           model: Filters.multipleSelect,
           collection: this.complexityLevelList
@@ -199,7 +200,8 @@ export class Example12 {
       {
         id: 'start', name: 'Start', field: 'start', sortable: true, minWidth: 100,
         formatter: Formatters.dateUs, columnGroup: 'Period',
-        type: FieldType.dateUs, outputType: FieldType.dateUs,
+        exportCustomFormatter: Formatters.dateUs,
+        type: FieldType.date, outputType: FieldType.dateUs, saveOutputType: FieldType.dateUtc,
         filterable: true, filter: { model: Filters.compoundDate },
         editor: { model: Editors.date, massUpdate: true, params: { hideClearButton: false } },
       },
@@ -219,8 +221,9 @@ export class Example12 {
       {
         id: 'finish', name: 'Finish', field: 'finish', sortable: true, minWidth: 100,
         formatter: Formatters.dateUs, columnGroup: 'Period',
-        type: FieldType.dateUs, outputType: FieldType.dateUs,
+        type: FieldType.date, outputType: FieldType.dateUs, saveOutputType: FieldType.dateUtc,
         filterable: true, filter: { model: Filters.compoundDate },
+        exportCustomFormatter: Formatters.dateUs,
         editor: {
           model: Editors.date,
           editorOptions: { minDate: 'today' },
@@ -892,6 +895,7 @@ export class Example12 {
       this.compositeEditorInstance?.openDetails({
         headerTitle: modalTitle,
         modalType,
+        insertOptions: { highlightRow: false }, // disable highlight to avoid flaky tests in Cypress
         // showCloseButtonOutside: true,
         // backdrop: null,
         // viewColumnLayout: 2, // responsive layout, choose from 'auto', 1, 2, or 3 (defaults to 'auto')
@@ -900,7 +904,7 @@ export class Example12 {
         onClose: () => Promise.resolve(confirm('You have unsaved changes, are you sure you want to close this window?')),
         onError: (error) => alert(error.message),
         onSave: (formValues, _selection, dataContext) => {
-          const serverResponseDelay = 250;
+          const serverResponseDelay = 50;
 
           // simulate a backend server call which will reject if the "% Complete" is below 50%
           // when processing a mass update or mass selection

packages/common/package.json

@@ -78,7 +78,7 @@
     "autoprefixer": "^10.2.4",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
-    "mini-css-extract-plugin": "^1.3.8",
+    "mini-css-extract-plugin": "^1.3.9",
     "node-sass": "5.0.0",
     "nodemon": "^2.0.7",
     "npm-run-all": "^4.1.5",
@@ -90,4 +90,4 @@
     "node": ">=14.15.0",
     "npm": ">=6.14.8"
   }
-}
+}

packages/common/src/editors/__tests__/autoCompleteEditor.spec.ts

@@ -783,6 +783,17 @@ describe('AutoCompleteEditor', () => {
         expect(liElm.innerHTML).toBe(mockTemplateString);
       });
     });
+
+    it('should call "clear" method and expect the DOM element to become blank & untouched', () => {
+      editor = new AutoCompleteEditor(editorArguments);
+      const saveSpy = jest.spyOn(editor, 'save');
+      editor.loadValue({ ...mockItemData, gender: 'male' });
+      editor.show();
+      editor.clear();
+
+      expect(saveSpy).toHaveBeenCalled();
+      expect(editor.editorDomElement.val()).toEqual('');
+    });
   });
 
   describe('with Composite Editor', () => {
@@ -891,6 +902,28 @@ describe('AutoCompleteEditor', () => {
       expect(editor.editorDomElement.val()).toEqual('');
     });
 
+    it('should call "reset" method and expect the DOM element to become blank & untouched and have an empty formValues be passed in the onCompositeEditorChange event', () => {
+      const activeCellMock = { row: 0, cell: 0 };
+      const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);
+      const onCompositeEditorSpy = jest.spyOn(gridStub.onCompositeEditorChange, 'notify').mockReturnValue(false);
+      gridOptionMock.compositeEditorOptions = {
+        excludeDisabledFieldFormValues: true
+      };
+
+      editor = new AutoCompleteEditor(editorArguments);
+      editor.loadValue({ ...mockItemData, gender: 'male' });
+      editor.show();
+      editor.reset('');
+
+      expect(getCellSpy).toHaveBeenCalled();
+      expect(onCompositeEditorSpy).toHaveBeenCalledWith({
+        ...activeCellMock, column: mockColumn, item: mockItemData, grid: gridStub,
+        formValues: {}, editors: {}, triggeredBy: 'user',
+      }, expect.anything());
+      expect(editor.editorDomElement.attr('disabled')).toEqual('disabled');
+      expect(editor.editorDomElement.val()).toEqual('');
+    });
+
     it('should expect "setValue" to have been called and also "onCompositeEditorChange" to have been triggered with the new value showing up in its "formValues" object', () => {
       const activeCellMock = { row: 0, cell: 0 };
       const getCellSpy = jest.spyOn(gridStub, 'getActiveCell').mockReturnValue(activeCellMock);

packages/common/src/editors/__tests__/dateEditor.spec.ts

@@ -229,7 +229,7 @@ describe('DateEditor', () => {
         editor = new DateEditor(editorArguments);
         editor.loadValue(mockItemData);
         editor.focus();
-        const clearBtnElm = divContainer.querySelector('.btn.icon-close') as HTMLInputElement;
+        const clearBtnElm = divContainer.querySelector('.btn.icon-clear') as HTMLInputElement;
         const editorInputElm = divContainer.querySelector('.flatpickr input') as HTMLInputElement;
         clearBtnElm.click();
         editorInputElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', { keyCode: 13, bubbles: true, cancelable: true }));
@@ -247,7 +247,7 @@ describe('DateEditor', () => {
         editor = new DateEditor(editorArguments);
         editor.loadValue(mockItemData);
         editor.focus();
-        const clearBtnElm = divContainer.querySelector('.btn.icon-close') as HTMLInputElement;
+        const clearBtnElm = divContainer.querySelector('.btn.icon-clear') as HTMLInputElement;
         const editorInputElm = divContainer.querySelector('.flatpickr input') as HTMLInputElement;
         clearBtnElm.click();