Refresh outline filter whenever something changes

Fixes #2601

packages/node_modules/@node-red/editor-client/src/js/ui/common/treeList.js

@@ -346,6 +346,10 @@
                         },100);
                     }
                     that._trigger("sort",null,item);
+
+                    if (that.activeFilter) {
+                        that.filter(that.activeFilter);
+                    }
                 }
             }
             item.treeList.addChild = function(newItem,select) {
@@ -772,7 +776,8 @@
                 return undefined;
             }
         },
-        filter: function(filterFunc,expandResults) {
+        filter: function(filterFunc) {
+            this.activeFilter = filterFunc;
             var totalCount = 0;
             var filter = function(item) {
                 var matchCount = 0;

packages/node_modules/@node-red/editor-client/src/js/ui/tab-info-outliner.js

@@ -2,6 +2,7 @@ RED.sidebar.info.outliner = (function() {
 
     var treeList;
     var searchInput;
+    var activeSearch;
     var projectInfo;
     var projectInfoLabel;
     var flowList;
@@ -212,6 +213,7 @@ RED.sidebar.info.outliner = (function() {
                 var val = $(this).val();
                 var searchResults = RED.search.search(val);
                 if (val) {
+                    activeSearch = val;
                     var resultMap = {};
                     for (var i=0,l=searchResults.length;i<l;i++) {
                         resultMap[searchResults[i].node.id] = true;
@@ -223,6 +225,7 @@ RED.sidebar.info.outliner = (function() {
                         return item.id &&  objects[item.id] && resultMap[item.id]
                     },true)
                 } else {
+                    activeSearch = null;
                     treeList.treeList('filter',null);
                     var selected = treeList.treeList('selected');
                     if (selected.id) {
@@ -308,7 +311,7 @@ RED.sidebar.info.outliner = (function() {
         flowList.treeList.addChild(objects[ws.id])
         objects[ws.id].element.toggleClass("red-ui-info-outline-item-disabled", !!ws.disabled)
         objects[ws.id].treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!ws.disabled)
-
+        updateSearch();
 
     }
     function onFlowChange(n) {
@@ -322,6 +325,7 @@ RED.sidebar.info.outliner = (function() {
         existingObject.element.find(".red-ui-info-outline-item-label").text(label);
         existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
         existingObject.treeList.container.toggleClass("red-ui-info-outline-item-disabled", !!n.disabled)
+        updateSearch();
     }
     function onFlowsReorder(order) {
         var indexMap = {};
@@ -350,6 +354,7 @@ RED.sidebar.info.outliner = (function() {
             objects[sf.id].children.push(getEmptyItem(sf.id));
         }
         subflowList.treeList.addChild(objects[sf.id])
+        updateSearch();
     }
     function onSubflowChange(sf) {
         var existingObject = objects[sf.id];
@@ -361,6 +366,7 @@ RED.sidebar.info.outliner = (function() {
                 sfInstance.treeList.replaceElement(getNodeLabel(n));
             }
         });
+        updateSearch();
     }
 
     function onNodeChange(n) {
@@ -386,6 +392,7 @@ RED.sidebar.info.outliner = (function() {
             }
         }
         existingObject.element.toggleClass("red-ui-info-outline-item-disabled", !!n.d)
+        updateSearch();
     }
     function onObjectRemove(n) {
         var existingObject = objects[n.id];
@@ -447,8 +454,20 @@ RED.sidebar.info.outliner = (function() {
             globalConfigNodes.treeList.addChild(objects[n.id])
         }
         objects[n.id].element.toggleClass("red-ui-info-outline-item-disabled", !!n.d)
+        updateSearch();
     }
 
+    var updateSearchTimer;
+    function updateSearch() {
+        if (updateSearchTimer) {
+            clearTimeout(updateSearchTimer)
+        }
+        if (activeSearch) {
+            updateSearchTimer = setTimeout(function() {
+                searchInput.searchBox("change");
+            },100);
+        }
+    }
     function onSelectionChanged(selection) {
         // treeList.treeList('clearSelection');
     }

packages/node_modules/@node-red/editor-client/src/sass/search.scss

@@ -46,6 +46,7 @@
         border: 1px dashed $primary-border-color;
         border-bottom: none;
         padding: 0;
+        width: 100%;
     }
     .red-ui-search-results-container {
         display: none;