enhancement make it easier to work with network filter textbox #58

javascript/extraNetworks.js

@@ -5,12 +5,24 @@ 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)
-
-    search.addEventListener("input", function(evt){
+    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()
 
         gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){

javascript/ui.js

@@ -925,7 +925,7 @@ onUiUpdate(function(){
 	tabsHiddenChange();
 	
 	gradioApp().querySelectorAll('[id^="image_buttons_"] button, #png_2img_results button').forEach(function (elem){
-
+		//console.log(opts.send_seed);
 		if(elem.id == "txt2img_tab"){
 			elem.setAttribute("tab-id", 0);
 			elem.addEventListener('click', navTabClicked);
@@ -938,6 +938,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');

style.css

@@ -1933,11 +1933,20 @@ button.secondary{
     padding-bottom: 0px !important;
     min-height: 34px !important;
 }
-
 .extra-networks .search
 {
 	width:60%;
 }
+
+.extra-networks [id$="2img_extra_clear"]
+{
+	position: relative;
+    border-radius: 50%!important;
+    margin-left: -25px !important;
+    margin-top: 7px;
+    right: 7px;
+}
+
 .extra-networks + *
 {
 	display:none !important;