fix(filters): remove filter DOM element IDs to avoid duplicate IDs

- move the element IDs as CSS classes instead
ghiscoding · Jan 20, 2020 · 4b83133 · 4b83133
1 parent 3c1b448
commit 4b83133
Show file tree

Hide file tree

Showing 11 changed files with 26 additions and 32 deletions.
diff --git a/src/app/examples/custom-inputFilter.ts b/src/app/examples/custom-inputFilter.ts
@@ -129,7 +129,6 @@ export class CustomInputFilter implements Filter {
     const $filterElm = $(filterTemplate);
 
     $filterElm.val(searchTerm);
-    $filterElm.attr('id', `filter-${this.columnDef.id}`);
     $filterElm.data('columnId', this.columnDef.id);
 
     // append the new DOM element to the header row

diff --git a/src/app/modules/angular-slickgrid/editors/sliderEditor.ts b/src/app/modules/angular-slickgrid/editors/sliderEditor.ts
@@ -84,7 +84,10 @@ export class SliderEditor implements Editor {
       this._$editorElm.on('input change', (event: KeyboardEvent & { target: HTMLInputElement }) => {
         const value = event && event.target && event.target.value || '';
         if (value) {
-          document.getElementById(this._elementRangeOutputId).innerHTML = event.target.value;
+          const elements = document.getElementsByClassName(this._elementRangeOutputId);
+          if (elements.length) {
+            elements[0].innerHTML = event.target.value;
+          }
         }
       });
     }
@@ -218,22 +221,20 @@ export class SliderEditor implements Editor {
     if (this.editorParams.hideSliderNumber) {
       return `
       <div class="slider-container slider-editor">
-        <input type="range" id="${this._elementRangeInputId}"
-          name="${this._elementRangeInputId}" title="${title}"
+        <input type="range" name="${this._elementRangeInputId}" title="${title}"
           defaultValue="${defaultValue}" value="${defaultValue}"
           min="${minValue}" max="${maxValue}" step="${step}"
-          class="form-control slider-editor-input editor-${fieldId} range" />
+          class="form-control slider-editor-input editor-${fieldId} range ${this._elementRangeInputId}" />
       </div>`;
     }
 
     return `
       <div class="input-group slider-container slider-editor">
-        <input type="range" id="${this._elementRangeInputId}"
-          name="${this._elementRangeInputId}" title="${title}"
+        <input type="range" name="${this._elementRangeInputId}" title="${title}"
           defaultValue="${defaultValue}" value="${defaultValue}"
           min="${minValue}" max="${maxValue}" step="${step}"
-          class="form-control slider-editor-input editor-${fieldId} range" />
-        <div class="input-group-addon input-group-append slider-value"><span class="input-group-text" id="${this._elementRangeOutputId}">${defaultValue}</span></div>
+          class="form-control slider-editor-input editor-${fieldId} range ${this._elementRangeInputId}" />
+        <div class="input-group-addon input-group-append slider-value"><span class="input-group-text ${this._elementRangeOutputId}">${defaultValue}</span></div>
       </div>`;
   }
 }
diff --git a/src/app/modules/angular-slickgrid/filters/autoCompleteFilter.ts b/src/app/modules/angular-slickgrid/filters/autoCompleteFilter.ts
@@ -359,7 +359,6 @@ export class AutoCompleteFilter implements Filter {
     }
 
     $filterElm.val(searchTermInput);
-    $filterElm.attr('id', `filter-${columnId}`);
     $filterElm.data('columnId', columnId);
 
     // if there's a search term, we will add the "filled" class for styling purposes

diff --git a/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts b/src/app/modules/angular-slickgrid/filters/compoundDateFilter.ts
@@ -272,7 +272,6 @@ export class CompoundDateFilter implements Filter {
 
     // create the DOM element & add an ID and filter class
     $filterContainerElm.append($containerInputGroup);
-    $filterContainerElm.attr('id', `filter-${fieldId}`);
     this.$filterInputElm.data('columnId', fieldId);
 
     if (this.operator) {

diff --git a/src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts b/src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts
@@ -227,7 +227,6 @@ export class CompoundInputFilter implements Filter {
 
     // create the DOM element & add an ID and filter class
     $filterContainerElm.append($containerInputGroup);
-    $filterContainerElm.attr('id', `filter-${fieldId}`);
 
     this.$filterInputElm.val(searchTerm);
     this.$filterInputElm.data('columnId', fieldId);

diff --git a/src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts b/src/app/modules/angular-slickgrid/filters/compoundSliderFilter.ts
@@ -97,7 +97,10 @@ export class CompoundSliderFilter implements Filter {
       this.$filterInputElm.on('input change', (e: { target: HTMLInputElement }) => {
         const value = e && e.target && e.target.value || '';
         if (value) {
-          document.getElementById(this._elementRangeOutputId).innerHTML = value;
+          const elements = document.getElementsByClassName(this._elementRangeOutputId);
+          if (elements.length) {
+            elements[0].innerHTML = value;
+          }
         }
       });
     }
@@ -167,18 +170,17 @@ export class CompoundSliderFilter implements Filter {
     const defaultValue = this.filterParams.hasOwnProperty('sliderStartValue') ? this.filterParams.sliderStartValue : minValue;
     const step = this.filterProperties.hasOwnProperty('valueStep') ? this.filterProperties.valueStep : DEFAULT_STEP;
 
-    return `<input type="range" id="${this._elementRangeInputId}"
-              name="${this._elementRangeInputId}"
+    return `<input type="range" name="${this._elementRangeInputId}"
               defaultValue="${defaultValue}" min="${minValue}" max="${maxValue}" step="${step}"
-              class="form-control slider-filter-input range compound-slider" />`;
+              class="form-control slider-filter-input range compound-slider ${this._elementRangeInputId}" />`;
   }
 
   /** Build HTML Template for the text (number) that is shown appended to the slider */
   private buildTemplateSliderTextHtmlString() {
     const minValue = this.filterProperties.hasOwnProperty('minValue') ? this.filterProperties.minValue : DEFAULT_MIN_VALUE;
     const defaultValue = this.filterParams.hasOwnProperty('sliderStartValue') ? this.filterParams.sliderStartValue : minValue;
 
-    return `<div class="input-group-addon input-group-append slider-value"><span class="input-group-text" id="${this._elementRangeOutputId}">${defaultValue}</span></div>`;
+    return `<div class="input-group-addon input-group-append slider-value"><span class="input-group-text ${this._elementRangeOutputId}">${defaultValue}</span></div>`;
   }
 
   /** Build HTML Template select dropdown (operator) */
@@ -237,7 +239,7 @@ export class CompoundSliderFilter implements Filter {
           <select class="form-control"></select>
         </div>
         <input class="form-control" type="text" />
-        <div class="input-group-addon input-group-prepend" id="rangeOuput_percentComplete"><span class="input-group-text">0</span></div>
+        <div class="input-group-addon input-group-prepend rangeOuput_percentComplete"><span class="input-group-text">0</span></div>
       </div>
     */
     $operatorInputGroupAddon.append(this.$selectOperatorElm);
@@ -251,7 +253,6 @@ export class CompoundSliderFilter implements Filter {
 
     // create the DOM element & add an ID and filter class
     $filterContainerElm.append(this.$containerInputGroupElm);
-    $filterContainerElm.attr('id', `filter-${fieldId}`);
 
     this.$filterInputElm.val(searchTermInput);
     this.$filterInputElm.data('columnId', fieldId);

diff --git a/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts b/src/app/modules/angular-slickgrid/filters/dateRangeFilter.ts
@@ -253,7 +253,6 @@ export class DateRangeFilter implements Filter {
     */
 
     // create the DOM element & add an ID and filter class
-    this.$filterInputElm.attr('id', `filter-${fieldId}`);
     this.$filterInputElm.data('columnId', fieldId);
 
     // if there's a search term, we will add the "filled" class for styling purposes

diff --git a/src/app/modules/angular-slickgrid/filters/inputFilter.ts b/src/app/modules/angular-slickgrid/filters/inputFilter.ts
@@ -166,7 +166,6 @@ export class InputFilter implements Filter {
     const $filterElm = $(filterTemplate);
 
     $filterElm.val(searchTerm);
-    $filterElm.attr('id', `filter-${fieldId}`);
     $filterElm.data('columnId', fieldId);
 
     // if there's a search term, we will add the "filled" class for styling purposes

diff --git a/src/app/modules/angular-slickgrid/filters/nativeSelectFilter.ts b/src/app/modules/angular-slickgrid/filters/nativeSelectFilter.ts
@@ -196,7 +196,6 @@ export class NativeSelectFilter implements Filter {
     const searchTermInput = (searchTerm || '') as string;
 
     $filterElm.val(searchTermInput);
-    $filterElm.attr('id', `filter-${fieldId}`);
     $filterElm.data('columnId', fieldId);
 
     if (searchTermInput) {

diff --git a/src/app/modules/angular-slickgrid/filters/selectFilter.ts b/src/app/modules/angular-slickgrid/filters/selectFilter.ts
@@ -430,7 +430,6 @@ export class SelectFilter implements Filter {
     if (typeof this.$filterElm.multipleSelect !== 'function') {
       throw new Error(`multiple-select.js was not found, make sure to modify your "angular-cli.json" file and include "../node_modules/angular-slickgrid/lib/multiple-select/multiple-select.js" and it's css or SASS file`);
     }
-    this.$filterElm.attr('id', this.elementName);
     this.$filterElm.attr('name', this.elementName);
     this.$filterElm.data('columnId', fieldId);
 

diff --git a/src/app/modules/angular-slickgrid/filters/sliderFilter.ts b/src/app/modules/angular-slickgrid/filters/sliderFilter.ts
@@ -108,7 +108,10 @@ export class SliderFilter implements Filter {
       this.$filterElm.on('input change', (e: { target: HTMLInputElement }) => {
         const value = e && e.target && e.target.value;
         if (value !== undefined && value !== null) {
-          document.getElementById(this._elementRangeOutputId).innerHTML = value;
+          const elements = document.getElementsByClassName(this._elementRangeOutputId);
+          if (elements.length) {
+            elements[0].innerHTML = value;
+          }
         }
       });
     }
@@ -179,23 +182,21 @@ export class SliderFilter implements Filter {
     if (this.filterParams.hideSliderNumber) {
       return `
       <div class="search-filter slider-container filter-${fieldId}">
-        <input type="range" id="${this._elementRangeInputId}"
-          name="${this._elementRangeInputId}"
+        <input type="range" name="${this._elementRangeInputId}"
           defaultValue="${defaultValue}" value="${defaultValue}"
           min="${minValue}" max="${maxValue}" step="${step}"
-          class="form-control slider-filter-input range" />
+          class="form-control slider-filter-input range ${this._elementRangeInputId}" />
       </div>`;
     }
 
     return `
       <div class="input-group slider-container search-filter filter-${fieldId}">
-        <input type="range" id="${this._elementRangeInputId}"
-          name="${this._elementRangeInputId}"
+        <input type="range" name="${this._elementRangeInputId}"
           defaultValue="${defaultValue}" value="${defaultValue}"
           min="${minValue}" max="${maxValue}" step="${step}"
-          class="form-control slider-filter-input range" />
+          class="form-control slider-filter-input range ${this._elementRangeInputId}" />
         <div class="input-group-addon input-group-append slider-value">
-          <span class="input-group-text" id="${this._elementRangeOutputId}">${defaultValue}</span>
+          <span class="input-group-text ${this._elementRangeOutputId}">${defaultValue}</span>
         </div>
       </div>`;
   }
@@ -225,7 +226,6 @@ export class SliderFilter implements Filter {
 
     $filterElm.children('input').val(searchTermInput);
     $filterElm.children('div.input-group-addon.input-group-append').children().html(searchTermInput);
-    $filterElm.attr('id', `filter-${fieldId}`);
     $filterElm.data('columnId', fieldId);
 
     // if there's a search term, we will add the "filled" class for styling purposes