fix(common): Select Filter/Editor enableRenderHtml was wrong (#1096)

- fixes an issue identified in Angular-Slickgrid as per this issue ghiscoding/Angular-Slickgrid#1240
- the problem was when I moved to the new multiple-select-vanilla lib, I used the wrong flag, we need to use `renderOptionLabelAsHtml` when we want text labels and `useSelectOptionLabelToHtml` when we want values to be rendered as HTML, so the issue was that the flags were inversed and that is why it was showing the values instead of the text labels

examples/vite-demo-vanilla-bundle/src/examples/example07.ts

@@ -128,7 +128,12 @@ export default class Example7 {
         id: 'completed', nameKey: 'COMPLETED', field: 'completed', formatter: Formatters.checkmarkMaterial,
         filterable: true, sortable: true,
         filter: {
-          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
+          enableRenderHtml: true,
+          collection: [
+            { value: '', label: '' },
+            { value: true, label: 'True', labelPrefix: `<i class="mdi mdi-check mdi-v-align-middle"></i> ` },
+            { value: false, label: 'False', labelPrefix: `<i class="mdi mdi-close mdi-v-align-middle"></i> ` }
+          ],
           model: Filters.singleSelect
         },
         editor: {
@@ -138,8 +143,12 @@ export default class Example7 {
           // collection: [{ value: true, label: 'True' }, { value: false, label: 'False' }],
 
           // Select Editor can also support collection that are async, it could be a Promise (shown below) or Fetch result
+          enableRenderHtml: true,
           collectionAsync: new Promise<any>(resolve => setTimeout(() => {
-            resolve([{ value: true, label: 'True' }, { value: false, label: 'False' }]);
+            resolve([
+              { value: true, label: 'True', labelPrefix: `<i class="mdi mdi-check mdi-v-align-middle"></i> ` },
+              { value: false, label: 'False', labelPrefix: `<i class="mdi mdi-close mdi-v-align-middle"></i> ` }
+            ]);
           }, 250)),
         },
       },

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

@@ -87,6 +87,8 @@ describe('SingleSelectEditor', () => {
       const editorCount = document.body.querySelectorAll('select.ms-filter.editor-gender').length;
 
       expect(editorCount).toBe(1);
+      expect(editor.selectOptions.renderOptionLabelAsHtml).toBeFalsy();
+      expect(editor.selectOptions.useSelectOptionLabelToHtml).toBeFalsy();
     });
 
     it('should hide the DOM element div wrapper when the "hide" method is called', () => {
@@ -245,6 +247,8 @@ describe('SingleSelectEditor', () => {
         const editorListElm = divContainer.querySelectorAll<HTMLInputElement>(`[data-name=editor-gender].ms-drop ul>li span`);
         editorBtnElm.click();
 
+        expect(editor.selectOptions.renderOptionLabelAsHtml).toBeTruthy();
+        expect(editor.selectOptions.useSelectOptionLabelToHtml).toBeFalsy();
         expect(editor.getValue()).toEqual('');
         expect(editorListElm.length).toBe(2);
         expect(editorListElm[0].innerHTML).toBe('<i class="fa fa-check"></i> True');

packages/common/src/editors/selectEditor.ts

@@ -121,7 +121,7 @@ export class SelectEditor implements Editor {
       minHeight: 25,
       name: this.elementName,
       single: true,
-      useSelectOptionLabelToHtml: this.columnEditor?.enableRenderHtml ?? false,
+      renderOptionLabelAsHtml: this.columnEditor?.enableRenderHtml ?? false,
       sanitizer: (dirtyHtml: string) => sanitizeTextByAvailableSanitizer(this.gridOptions, dirtyHtml),
       onClick: () => this._isValueTouched = true,
       onCheckAll: () => this._isValueTouched = true,
@@ -209,6 +209,10 @@ export class SelectEditor implements Editor {
     return this._msInstance;
   }
 
+  get selectOptions() {
+    return this.defaultOptions;
+  }
+
   /**
    * The current selected values (multiple select) from the collection
    */

packages/common/src/filters/__tests__/selectFilter.spec.ts

@@ -490,6 +490,8 @@ describe('SelectFilter', () => {
     filterBtnElm.click();
     filter.msInstance?.close();
 
+    expect(filter.selectOptions.renderOptionLabelAsHtml).toBeTruthy();
+    expect(filter.selectOptions.useSelectOptionLabelToHtml).toBeFalsy();
     expect(filterListElm.length).toBe(2);
     expect(filterListElm[0].innerHTML).toBe('<i class="fa fa-check"></i> True');
   });
@@ -529,6 +531,8 @@ describe('SelectFilter', () => {
     filterOkElm.click();
     filter.msInstance?.close();
 
+    expect(filter.selectOptions.renderOptionLabelAsHtml).toBeFalsy();
+    expect(filter.selectOptions.useSelectOptionLabelToHtml).toBeFalsy();
     expect(filterListElm.length).toBe(3);
     expect(filterFilledElms.length).toBe(1);
     expect(filterListElm[0].value).toBe('');

packages/common/src/filters/selectFilter.ts

@@ -80,7 +80,7 @@ export class SelectFilter implements Filter {
 
   /** Getter for the Grid Options pulled through the Grid Object */
   get gridOptions(): GridOption {
-    return (this.grid && this.grid.getOptions) ? this.grid.getOptions() : {};
+    return this.grid?.getOptions() ?? {};
   }
 
   /** Getter to know what would be the default operator when none is specified */
@@ -97,6 +97,10 @@ export class SelectFilter implements Filter {
     return this._msInstance;
   }
 
+  get selectOptions() {
+    return this.defaultOptions;
+  }
+
   /** Getter for the Filter Operator */
   get operator(): OperatorType | OperatorString {
     return this.columnFilter?.operator ?? this.defaultOperator;
@@ -416,7 +420,7 @@ export class SelectFilter implements Filter {
       filter: false,  // input search term on top of the select option list
       maxHeight: 275,
       single: true,
-      useSelectOptionLabelToHtml: this.columnFilter?.enableRenderHtml ?? false,
+      renderOptionLabelAsHtml: this.columnFilter?.enableRenderHtml ?? false,
       sanitizer: (dirtyHtml: string) => sanitizeTextByAvailableSanitizer(this.gridOptions, dirtyHtml),
       // we will subscribe to the onClose event for triggering our callback
       // also add/remove "filled" class for styling purposes