fix(editors): fix couple of small editor bugs found (#563)

* fix(editors): fix couple of small editor bugs found

src/app/modules/angular-slickgrid/editors/__tests__/autoCompleteEditor.spec.ts

@@ -623,7 +623,7 @@ describe('AutoCompleteEditor', () => {
 
         expect(output).toBe(false);
         expect(spyCommitEdit).toHaveBeenCalled();
-        expect(spySetValue).toHaveBeenCalledWith('f');
+        expect(spySetValue).toHaveBeenCalledWith('Female');
       });
 
       it('should expect the "onSelect" method to be called when the callback method is triggered when user provide his own filterOptions', () => {

src/app/modules/angular-slickgrid/editors/__tests__/selectEditor.spec.ts

@@ -412,10 +412,10 @@ describe('SelectEditor', () => {
         expect(spy).toHaveBeenCalled();
       });
 
-      it('should not call anything when "hasAutoCommitEdit" is disabled', () => {
+      it('should not call "commitCurrentEdit" when "hasAutoCommitEdit" is disabled', () => {
         mockItemData = { id: 1, gender: 'male', isActive: true };
         gridOptionMock.autoCommitEdit = false;
-        const spy = jest.spyOn(editorArguments, 'commitChanges');
+        const spy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit');
 
         editor = new SelectEditor(editorArguments, true);
         editor.loadValue(mockItemData);
@@ -428,13 +428,15 @@ describe('SelectEditor', () => {
         mockItemData = { id: 1, gender: '', isActive: true };
         mockColumn.internalColumnEditor.required = true;
         gridOptionMock.autoCommitEdit = true;
-        const spy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit');
+        const commitEditSpy = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit');
+        const commitChangeSpy = jest.spyOn(editorArguments, 'commitChanges');
 
         editor = new SelectEditor(editorArguments, true);
         editor.loadValue(mockItemData);
         editor.save();
 
-        expect(spy).not.toHaveBeenCalled();
+        expect(commitEditSpy).not.toHaveBeenCalled();
+        expect(commitChangeSpy).not.toHaveBeenCalled();
       });
     });
 

src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts

@@ -272,16 +272,9 @@ export class AutoCompleteEditor implements Editor {
       // otherwise we know that jQueryUI always require a label/value pair, we can pull them directly
       const hasCustomRenderItemCallback = this.columnEditor && this.columnEditor.callbacks && this.columnEditor.callbacks.hasOwnProperty('_renderItem') || (this.columnEditor && this.columnEditor.editorOptions && this.columnEditor.editorOptions.renderItem) || false;
 
-      const itemValue = typeof item === 'string' ? item : (hasCustomRenderItemCallback ? item[this.valueName] : item.value);
-      this.setValue(itemValue);
-
-      if (this.hasAutoCommitEdit) {
-        // do not use args.commitChanges() as this sets the focus to the next row.
-        const validation = this.validate();
-        if (validation && validation.valid) {
-          this.grid.getEditorLock().commitCurrentEdit();
-        }
-      }
+      const itemLabel = typeof item === 'string' ? item : (hasCustomRenderItemCallback ? item[this.labelName] : item.label);
+      this.setValue(itemLabel);
+      this.save();
     }
     return false;
   }
@@ -410,6 +403,7 @@ export class AutoCompleteEditor implements Editor {
       }
     }
 
+    this._$editorElm.on('focus', () => this._$editorElm.select());
     setTimeout(() => this.focus(), 50);
   }
 }

src/app/modules/angular-slickgrid/editors/dateEditor.ts

@@ -108,7 +108,7 @@ export class DateEditor implements Editor {
         altInput: true,
         altFormat: outputFormat,
         dateFormat: inputFormat,
-        closeOnSelect: false,
+        closeOnSelect: true,
         locale: (currentLocale !== 'en') ? this.loadFlatpickrLocale(currentLocale) : 'en',
         onChange: () => this.save(),
         errorHandler: () => {

src/app/modules/angular-slickgrid/editors/selectEditor.ts

@@ -421,9 +421,11 @@ export class SelectEditor implements Editor {
     const validation = this.validate();
     if (validation && validation.valid && this.isValueChanged()) {
       if (!this._destroying && this.hasAutoCommitEdit) {
-        // do not use args.commitChanges() as this sets the focus to the next
-        // row. Also the select list will stay shown when clicking off the grid
+        // do not use args.commitChanges() as this sets the focus to the next row.
+        // also the select list will stay shown when clicking off the grid
         this.grid.getEditorLock().commitCurrentEdit();
+      } else {
+        this.args.commitChanges();
       }
     }
   }

src/app/modules/angular-slickgrid/filters/selectFilter.ts

@@ -107,7 +107,7 @@ export class SelectFilter implements Filter {
   /**
    * Initialize the filter template
    */
-  init(args: FilterArguments, isFilterFirstRender: boolean): Promise<boolean> {
+  init(args: FilterArguments): Promise<boolean> {
     if (!args) {
       throw new Error('[Angular-SlickGrid] A filter must always have an "init()" with valid arguments.');
     }

src/app/modules/angular-slickgrid/models/editorArguments.interface.ts

@@ -1,17 +1,38 @@
 import { Column, ElementPosition } from './index';
 
 export interface EditorArguments {
+  /** Column Definition */
   column: Column;
+
+  /** Column MetaData */
   columnMetaData: any;
+
+  /** Cell Container DOM Element of where the Editor will be created */
   container: HTMLDivElement;
+
+  /** Slick DataView */
   dataView: any;
+
+  /** Event that was triggered */
   event: Event;
+
+  /** Slick Grid object */
   grid: any;
+
+  /** Grid Position */
   gridPosition: ElementPosition;
+
+  /** Item DataContext */
   item: any;
+
+  /** Editor Position  */
   position: ElementPosition;
 
   // methods
+
+  /** Cancel the Editor Changes */
   cancelChanges: () => void;
+
+  /** Commit the Editor Changes */
   commitChanges: () => void;
 }

src/app/modules/angular-slickgrid/models/editorValidatorOutput.interface.ts

@@ -1,4 +1,7 @@
 export interface EditorValidatorOutput {
+  /** Did the validation pass? */
   valid: boolean;
+
+  /** Validation Error Message when field is invalid */
   msg?: string | null;
 }

src/app/modules/angular-slickgrid/models/multipleSelectOption.interface.ts

@@ -172,6 +172,9 @@ export interface MultipleSelectOption {
   // Events
   // ------------
 
+  /** Fires after the multiple-select DOM element is created. */
+  onAfterCreate?: () => void;
+
   /** Fires when the dropdown list is open. */
   onOpen?: () => void;
 

src/app/modules/angular-slickgrid/models/slickGrid.interface.ts

@@ -79,7 +79,7 @@ export interface SlickGrid {
    * 	  cell: activeCell
    * 	}
    */
-  getActiveCell(): number;
+  getActiveCell(): { row: number; cell: number; };
 
   /** Returns the DOM element containing the currently active cell. If no cell is active, null is returned. */
   getActiveCellNode(): HTMLElement;
@@ -219,10 +219,10 @@ export interface SlickGrid {
   /** Returns an array of row indices corresponding to the currently selected rows. */
   getSelectedRows(): number[];
 
-  /** Returns the current SelectionModel. See here for more information about SelectionModels.*/
+  /** Returns the current SelectionModel. See here for more information about SelectionModels. */
   getSelectionModel(): any;
 
-  /** Get sorted columns **/
+  /** Get sorted columns */
   getSortColumns(): ColumnSort[];
 
   /** Get Top Panel DOM element */

src/app/modules/angular-slickgrid/styles/_variables.scss

@@ -477,11 +477,12 @@ $editor-focus-box-shadow:                       inset 0 1px 1px rgba(0,0,0,.075)
 $date-editor-focus-border-color:                $editor-focus-border-color !default;
 $date-editor-focus-box-shadow:                  $editor-focus-box-shadow !default;
 $large-editor-background-color:                 #ffffff !default;
-$large-editor-border:                           2px solid #a0a0a0 !default;
+$large-editor-border:                           2px solid #b1b1b1 !default;
 $large-editor-text-padding:                     5px !default;
-$large-editor-border-radius:                    8px !default;
+$large-editor-border-radius:                    6px !default;
 $large-editor-textarea-height:                  80px !default;
 $large-editor-textarea-width:                   250px !default;
+$large-editor-button-border-radius:             3px !default;
 $large-editor-button-text-align:                right !default;
 $large-editor-footer-spacing:                   2px !default;
 $large-editor-count-font-size:                  11px !default;

src/app/modules/angular-slickgrid/styles/slick-editors.scss

@@ -64,6 +64,7 @@
     text-align: $large-editor-button-text-align;
     button {
       margin-left: $large-editor-footer-spacing;
+      border-radius: $large-editor-button-border-radius;
     }
   }
 

src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss

@@ -108,7 +108,6 @@ $autocomplete-loading-icon-width:           22px !default;
 $autocomplete-loading-icon-margin-left:     -26px !default;
 $autocomplete-loading-icon-line-height:     0px !default;
 $autocomplete-loading-icon-vertical-align:  sub !default;
-$large-editor-border-radius:                6px !default;
 $multiselect-icon-arrow-font-size:          $icon-font-size - 4px !default;
 $multiselect-icon-checked-color:            $highlight-color !default;
 $multiselect-icon-border:                   1px solid #d6d4d4 !default;
@@ -133,6 +132,8 @@ $row-move-plugin-icon-color:                $cell-text-color !default;
 $row-move-plugin-cursor:                    grab !default;
 $row-move-plugin-icon-width:                18px !default;
 $row-move-plugin-icon:                      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($row-move-plugin-icon-color)}" viewBox="0 0 24 24"><path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z"></path></svg>') !default;
+$large-editor-border-radius:                2px !default;
+$large-editor-button-border-radius:         2px !default;
 $editor-focus-box-shadow:                   0 0 3px $primary-color !default;
 $slider-editor-height:                      24px !default;
 $slider-filter-thumb-color:                 #3C97DD !default;