Docs/Examples/Manual: Keep focus when clear search input. (#25194)

* chore: re-focus filter input when clicking the X

* chore: renaming the exitSearchButton to clearSearchButton

* fix: re-focus also in examples and manual

docs/index.html

@@ -29,7 +29,7 @@
 			<div id="contentWrapper">
 				<div id="inputWrapper">
 					<input placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off" spellcheck="false" />
-					<div id="exitSearchButton"></div>
+					<div id="clearSearchButton"></div>
 					<select id="language">
 						<option value="en">en</option>
 						<option value="ar">ar</option>
@@ -54,7 +54,7 @@
 		const panel = document.getElementById( 'panel' );
 		const content = document.getElementById( 'content' );
 		const expandButton = document.getElementById( 'expandButton' );
-		const exitSearchButton = document.getElementById( 'exitSearchButton' );
+		const clearSearchButton = document.getElementById( 'clearSearchButton' );
 		const panelScrim = document.getElementById( 'panelScrim' );
 		const filterInput = document.getElementById( 'filterInput' );
 		let iframe = document.querySelector( 'iframe' );
@@ -165,11 +165,11 @@
 
 			};
 
-			exitSearchButton.onclick = function () {
+			clearSearchButton.onclick = function () {
 
 				filterInput.value = '';
 				updateFilter();
-				panel.classList.remove( 'searchFocused' );
+				filterInput.focus();
 
 			};
 

examples/index.html

@@ -29,7 +29,7 @@
 
 				<div id="inputWrapper">
 					<input placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off" spellcheck="false" />
-					<div id="exitSearchButton"></div>
+					<div id="clearSearchButton"></div>
 				</div>
 
 				<div id="content">
@@ -49,7 +49,7 @@
 		const content = document.getElementById( 'content' );
 		const viewer = document.getElementById( 'viewer' );
 		const filterInput = document.getElementById( 'filterInput' );
-		const exitSearchButton = document.getElementById( 'exitSearchButton' );
+		const clearSearchButton = document.getElementById( 'clearSearchButton' );
 		const expandButton = document.getElementById( 'expandButton' );
 		const viewSrcButton = document.getElementById( 'button' );
 		const panelScrim = document.getElementById( 'panelScrim' );
@@ -153,11 +153,11 @@
 
 			};
 
-			exitSearchButton.onclick = function ( ) {
+			clearSearchButton.onclick = function ( ) {
 
 				filterInput.value = '';
 				updateFilter( files, tags );
-				panel.classList.remove( 'searchFocused' );
+				filterInput.focus();
 
 			};
 

files/main.css

@@ -138,7 +138,7 @@ h1 a {
 	transition: 0s 0s height;
 }
 
-	#panel #exitSearchButton {
+	#panel #clearSearchButton {
 		width: 48px;
 		height: 48px;
 		display: none;
@@ -154,7 +154,7 @@ h1 a {
 		margin-right: 0px;
 	}
 
-	#panel.searchFocused #exitSearchButton {
+	#panel.searchFocused #clearSearchButton {
 		display: block;
 	}
 

manual/index.html

@@ -28,7 +28,7 @@
 			<div id="contentWrapper">
 				<div id="inputWrapper">
 					<input placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off" spellcheck="false" />
-					<div id="exitSearchButton"></div>
+					<div id="clearSearchButton"></div>
 					<select id="language">
 						<option value="en">en</option>
 						<option value="fr">fr</option>
@@ -51,7 +51,7 @@
 		const panel = document.querySelector( '#panel' );
 		const content = document.querySelector( '#content' );
 		const expandButton = document.querySelector( '#expandButton' );
-		const exitSearchButton = document.querySelector( '#exitSearchButton' );
+		const clearSearchButton = document.querySelector( '#clearSearchButton' );
 		const panelScrim = document.querySelector( '#panelScrim' );
 		const filterInput = document.querySelector( '#filterInput' );
 		let iframe = document.querySelector( 'iframe' );
@@ -141,11 +141,11 @@
 
 			};
 
-			exitSearchButton.onclick = function () {
+			clearSearchButton.onclick = function () {
 
 				filterInput.value = '';
 				updateFilter();
-				panel.classList.remove( 'searchFocused' );
+				filterInput.focus();
 
 			};