make it easier to work with network filter textbox #58

javascript/extraNetworks.js

@@ -5,10 +5,22 @@ function setupExtraNetworksForTab(tabname){
     var tabs = gradioApp().querySelector('#'+tabname+'_extra_tabs > div')
     var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea')
     var refresh = gradioApp().getElementById(tabname+'_extra_refresh')
-
+	
+	let clear = document.createElement("div");
+	clear.id = 	tabname+'_extra_clear';
+	clear.classList.add("token-remove", "remove-all", "svelte-a6vu2r", "hide");
+	clear.title = "Clear search";
+	clear.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>'
+    
     search.classList.add('search')
-    tabs.appendChild(search)
-    tabs.appendChild(refresh)
+    tabs.appendChild(search)    
+	tabs.appendChild(clear)
+	tabs.appendChild(refresh)
+	
+	clear.addEventListener("click", function(evt){
+		search.value = "";
+		updateInput(search);
+	})
 
     search.addEventListener("input", function(evt){
         searchTerm = search.value.toLowerCase()

javascript/ui.js

@@ -865,6 +865,24 @@ onUiUpdate(function(){
 		}		
 	})
 	
+	gradioApp().querySelectorAll('[id$="2img_extra_tabs"] .search').forEach(function (elem){
+		elem.addEventListener('keyup', function (e) {
+			if (e.defaultPrevented) {
+				return; // Do nothing if event already handled
+			}
+			switch (e.code) {
+				case "Escape":
+				if(e.target.value == ""){
+					net_menu.click();
+				}else{
+					e.target.value = "";
+					updateInput(e.target);
+				}
+				break;
+			}
+		})
+	})
+	
 	// add - remove quicksettings
 	const settings_submit = gradioApp().querySelector('#settings_submit');
 	const quick_parent = gradioApp().querySelector("#quicksettings_overflow_container");