Add clear search button

Author: ggbhat

packages/default-theme/style/commandpalette.css

@@ -26,12 +26,13 @@
   padding: 4px 6px;
   background: white;
   border: 1px solid #E0E0E0;
+  position: relative;
 }
 
 
 /* <DEPRECATED> */ .p-CommandPalette-input, /* </DEPRECATED> */
 .lm-CommandPalette-input {
-  width: 100%;
+  width: 92%;
   border: none;
   outline: none;
   font-size: 16px;

packages/widgets/src/commandpalette.ts

@@ -202,6 +202,14 @@ class CommandPalette extends Widget {
    */
   refresh(): void {
     this._results = null;
+    if(this.inputNode.value !== '') {
+      let clear = this.node.getElementsByClassName('lm-close-icon')[0] as HTMLInputElement;
+      clear.style.display = 'inherit'
+    }
+    else {
+      let clear = this.node.getElementsByClassName('lm-close-icon')[0] as HTMLInputElement;
+      clear.style.display = 'none'
+    }
     this.update();
   }
 
@@ -338,6 +346,13 @@ class CommandPalette extends Widget {
       return;
     }
 
+    // Clear input if the target is clear button
+    if((event.target as HTMLElement).classList.contains("lm-close-icon")) {
+      this.inputNode.value = '';
+      this.refresh();
+      return;
+    }
+
     // Find the index of the item which was clicked.
     let index = ArrayExt.findFirstIndex(this.contentNode.children, node => {
       return node.contains(event.target as HTMLElement);
@@ -1024,9 +1039,12 @@ namespace Private {
     let wrapper = document.createElement('div');
     let input = document.createElement('input');
     let content = document.createElement('ul');
+    let clear = document.createElement('button');
     search.className = 'lm-CommandPalette-search';
     wrapper.className = 'lm-CommandPalette-wrapper';
     input.className = 'lm-CommandPalette-input';
+    clear.className = 'lm-close-icon';
+
     content.className = 'lm-CommandPalette-content';
     /* <DEPRECATED> */
     search.classList.add('p-CommandPalette-search');
@@ -1035,8 +1053,8 @@ namespace Private {
     content.classList.add('p-CommandPalette-content');
     /* </DEPRECATED> */
     input.spellcheck = false;
-    input.type = 'search';
     wrapper.appendChild(input);
+    wrapper.appendChild(clear);
     search.appendChild(wrapper);
     node.appendChild(search);
     node.appendChild(content);

packages/widgets/style/commandpalette.css

@@ -76,3 +76,30 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.lm-close-icon {
+	border:1px solid transparent;
+  background-color: transparent;
+  position: absolute;
+	z-index:1;
+	right:3%;
+	top: 0;
+	bottom: 0;
+	margin: auto;
+	padding: 7px 0;
+	display: none;
+	vertical-align: middle;
+  outline: 0;
+  cursor: pointer;
+}
+.lm-close-icon:after {
+	content: "X";
+	display: block;
+	width: 15px;
+	height: 15px;
+	text-align: center;
+	color:#000;
+	font-weight: normal;
+	font-size: 12px;
+	cursor: pointer;
+}