Remove search inputs scope on element removal

front/core/components/smart-table/index.js

@@ -12,12 +12,18 @@ export default class SmartTable extends Component {
         this.currentUserId = window.localStorage.currentUserWorkerId;
         this.$transclude = $transclude;
         this.sortCriteria = [];
+        this.$inputScopes = [];
         this.columns = [];
         this.autoSave = false;
-
         this.transclude();
     }
 
+    $onDestroy() {
+        const styleElement = document.querySelector('style[id="smart-table"]');
+        if (this.$.css && styleElement)
+            styleElement.parentNode.removeChild(styleElement);
+    }
+
     get options() {
         return this._options;
     }
@@ -172,11 +178,6 @@ export default class SmartTable extends Component {
             document.head.appendChild(this.$.css);
             this.$.css.appendChild(document.createTextNode(rule));
         }
-
-        this.$.$on('$destroy', () => {
-            if (this.$.css && styleElement)
-                styleElement.parentNode.removeChild(styleElement);
-        });
     }
 
     registerColumns() {
@@ -238,7 +239,13 @@ export default class SmartTable extends Component {
         const columns = header.querySelectorAll('th');
 
         const hasSearchRow = tbody.querySelector('tr#searchRow');
-        if (hasSearchRow) return hasSearchRow.remove();
+        if (hasSearchRow) {
+            if (this.$inputScopes) {
+                for (let $inputScope of this.$inputScopes)
+                    $inputScope.$destroy();
+            }
+            return hasSearchRow.remove();
+        }
 
         const searchRow = document.createElement('tr');
         searchRow.setAttribute('id', 'searchRow');
@@ -258,13 +265,13 @@ export default class SmartTable extends Component {
                     continue;
                 }
 
+                const $inputScope = this.$.$new();
                 if (options && options.autocomplete) {
                     let props = ``;
 
                     const autocomplete = options.autocomplete;
                     for (const prop in autocomplete)
                         props += `${camelToKebab(prop)}="${autocomplete[prop]}"\n`;
-
                     input = this.$compile(`
                     <vn-autocomplete
                         class="dense"
@@ -273,7 +280,7 @@ export default class SmartTable extends Component {
                         ${props}
                         on-change="$ctrl.searchByColumn('${field}')"
                         clear-disabled="true"
-                    />`)(this.$);
+                    />`)($inputScope);
                 } else {
                     input = this.$compile(`
                         <vn-textfield
@@ -282,8 +289,9 @@ export default class SmartTable extends Component {
                             ng-model="searchProps['${field}']"
                             ng-keydown="$ctrl.searchWithEvent($event, '${field}')"
                             clear-disabled="true"
-                        />`)(this.$);
+                        />`)($inputScope);
                 }
+                this.$inputScopes.push($inputScope);
                 cell.appendChild(input[0]);
             }
             searchRow.appendChild(cell);
@@ -406,10 +414,6 @@ export default class SmartTable extends Component {
         this.model.save()
             .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
     }
-
-    hasChanges() {
-        return true;
-    }
 }
 
 SmartTable.$inject = ['$element', '$scope', '$transclude'];