Added close button to abort search in jina searchbar

src/SearchBar.js

@@ -8,6 +8,7 @@ class SearchBar extends SearchComponent{
 		this.contentContainer = this.getElement('jina-search-expander');
 		this.searchInput = this.getElement('jina-search-input');
 		this.searchIcon = this.getElement('jina-search-icon');
+		this.closeIcon = this.getElement('jina-close-icon');
 		this.init();
 	}
 }

src/SearchComponent.js

@@ -933,8 +933,12 @@ class JinaBoxSearchComponent extends HTMLElement {
 			if (this.contentContainer) {
 				this.contentContainer.addEventListener('drop', this.handleDrop);
 			}
-			if (this.searchIcon)
+			if (this.searchIcon) {
 				this.searchIcon.addEventListener('click', this.showInputOptions);
+			}
+			if (this.closeIcon) {
+				this.closeIcon.addEventListener('click', this.clearExpander);
+			}
 
 			this.resultsView = localStorage.getItem('jina-results-view') || 'list';
 
@@ -969,6 +973,7 @@ class JinaBoxSearchComponent extends HTMLElement {
 					<div class="jina-search-container">
 						<img src="${this.defaultSearchIcon}" class="jina-search-icon" onerror="this.src='${this.defaultSearchIcon}'" />
 						<input placeholder="type or drop to search" class="jina-search-input jina-contained" autocomplete="off">
+						<img src="${_icons.close}" class="jina-close-icon" onerror="this.src='${_icons.close}'"/>
 					</div>
 				</div>
 			</div>

src/__tests__/SearchBar.test.js

@@ -13,8 +13,9 @@ describe('SearchBar test', () => {
         div.innerHTML = `<jina-searchbar></jina-searchbar>`;
         container = div;
     });
-    it('should show search bar with icon and placeholder on input element', function () {
+    it('should show search bar with search and close icons and placeholder on input element', function () {
         expect(container.querySelector(".jina-search-input").getAttribute("placeholder")).toEqual('type or drop to search');
         expect(container.querySelector(".jina-search-icon").getAttribute("src")).toEqual(icons.color);
+        expect(container.querySelector(".jina-close-icon").getAttribute("src")).toEqual(icons.close);
     });
 });

src/index.css

@@ -348,6 +348,7 @@
 		z-index: 1;
 }
 .jina-search-container {
+    display: flex;
     position: relative;
 }
 .jina-persian {
@@ -884,6 +885,11 @@
     /* text-align: right; */
 }
 
+.jina-close-icon {
+    height: 30px;
+    cursor: pointer;
+}
+
 .jina-jumping-dots {
 	position:relative;
 	text-align:center;