@aquera/nile-elements 0.0.6-3 → 0.0.6-5

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.6-3",
+  "version": "0.0.6-5",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-select/nile-select.ts

@@ -865,6 +865,11 @@ export class NileSelect extends NileElement implements NileFormControl {
     this.displayInput.blur();
   }
 
+  onInputChange(event: Event) {
+    // This will stop the event from bubbling up to the parent `nile-select` component
+    event.stopPropagation();
+  }
+
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
@@ -1068,7 +1073,6 @@ export class NileSelect extends NileElement implements NileFormControl {
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
             >
-
               ${this.optionsLoading
                 ? html`
                     <span class="select__loader">
@@ -1079,7 +1083,6 @@ export class NileSelect extends NileElement implements NileFormControl {
                     </span>
                   `
                 : ''}
-
               ${this.searchEnabled
                 ? html` <div class="select__search">
                     <nile-input
@@ -1090,6 +1093,7 @@ export class NileSelect extends NileElement implements NileFormControl {
                       @nile-input=${this.handleSearchChange}
                       @nile-focus=${this.handleSearchFocus}
                       @nile-blur=${this.handleSearchBlur}
+                      @nile-change="${this.onInputChange}"
                     >
                       <nile-icon name="search" slot="suffix"> </nile-icon>
                     </nile-input>
@@ -1122,9 +1126,13 @@ export class NileSelect extends NileElement implements NileFormControl {
                         &nbsp; Show Selected</nile-checkbox
                       >
                     </span>
-                    <span class="select__clear" @click="${this.unSlectAll}"
-                      >clear all</span
-                    >
+                    ${this.selectedOptions.length !== 0
+                      ? html` <span
+                          class="select__clear"
+                          @click="${this.unSlectAll}"
+                          >clear all</span
+                        >`
+                      : ``}
                   </div>`
                 : ``}
             </div>