@exmg/exm-search 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-search",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@exmg/lit-base": "^2.0.1",
-    "@material/web": "^1.3.0",
+    "@material/web": "^2.2.0",
     "lit": "^3.0.0",
     "tslib": "^2.6.2"
   },
@@ -40,5 +40,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8e971cbad07fa6fab5a95aefd915937b752d2204"
+  "gitHead": "274f2fb879258487017192fcfe33c8cd23244dbb"
 }

package/src/exm-search-base.d.ts

@@ -1,4 +1,5 @@
 import { ExmgElement } from '@exmg/lit-base';
+import { PropertyValues } from 'lit';
 import '@material/web/icon/icon.js';
 import '@material/web/iconbutton/icon-button.js';
 import '@material/web/focus/md-focus-ring.js';
@@ -8,14 +9,17 @@ export declare class ExmSearchBase extends ExmgElement {
     filterValue?: string | null;
     placeHolder: string;
     search?: HTMLInputElement;
+    detectOutsideBind?: (e: Event) => void;
     constructor();
     protected fire<T>(eventName: string, detail?: T, bubbles?: boolean): void;
     focus(): void;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    detectOutsideClick(e: Event): void;
     render(): import("lit-html").TemplateResult<1>;
     _getValue(): string;
     _notifyChange(): void;
-    _handleClear(e: CustomEvent): void;
+    _handleClear(e: Event): void;
     _handleKeyUp(e: KeyboardEvent): void;
-    _handleInputBlur(): void;
     updated(changedProperties: Map<string, any>): void;
 }

package/src/exm-search-base.js

@@ -15,10 +15,6 @@ export class ExmSearchBase extends ExmgElement {
         // Set default tabindex to 0
         const tabindex = this.getAttribute('tabindex');
         this.setAttribute('tabindex', tabindex || '0');
-        // Add focus event listener to focus input
-        this.addEventListener('focus', () => {
-            this.focus();
-        });
     }
     fire(eventName, detail, bubbles) {
         this.dispatchEvent(new CustomEvent(eventName, {
@@ -30,13 +26,33 @@ export class ExmSearchBase extends ExmgElement {
     focus() {
         this._hasFocus = true;
     }
+    firstUpdated(_changedProperties) {
+        this.detectOutsideBind = this.detectOutsideClick.bind(this);
+        document.addEventListener('click', this.detectOutsideBind);
+    }
+    disconnectedCallback() {
+        this.detectOutsideBind && document.removeEventListener('click', this.detectOutsideBind);
+        super.disconnectedCallback();
+    }
+    detectOutsideClick(e) {
+        const path = e.composedPath();
+        if (path.length > 0) {
+            // @ts-ignore
+            const container = path.find((el) => el.id === 'clickbox');
+            // const container = actualTarget.closest('#clickbox');
+            if (!container) {
+                // Clicked outside the box
+                this._hasFocus = false;
+            }
+        }
+    }
     render() {
         const classMapValues = {
             search: true,
             hasFocus: this._hasFocus,
         };
         return html `
-      <div class=${classMap(classMapValues)}>
+      <div id="clickbox" class=${classMap(classMapValues)}>
         <div class="mode-input">
           <md-focus-ring for="searchInput" inward></md-focus-ring>
           <md-icon class="search">search</md-icon>
@@ -46,7 +62,6 @@ export class ExmSearchBase extends ExmgElement {
             value=${this.filterValue ? this.filterValue : ''}
             onfocus="let value = this.value; this.value = null; this.value = value"
             @keyup=${this._handleKeyUp}
-            @blur=${this._handleInputBlur}
           />
           ${this.filterValue
             ? html `
@@ -54,7 +69,7 @@ export class ExmSearchBase extends ExmgElement {
               `
             : nothing}
         </div>
-        <div class="mode-default" @click=${() => (this._hasFocus = true)}>
+        <div class="mode-default" @click=${() => this.focus()}>
           <md-icon class="search">search</md-icon>
           <span class="interactive-content">${this._getValue()}</span>
           ${this.filterValue
@@ -73,12 +88,15 @@ export class ExmSearchBase extends ExmgElement {
         this.fire('search-value-change', { value: this.filterValue }, this.bubbles);
     }
     _handleClear(e) {
+        var _a;
+        e.stopPropagation();
         e.preventDefault();
         this.filterValue = null;
         if (this.search) {
             this.search.value = '';
         }
         this._notifyChange();
+        (_a = this.search) === null || _a === void 0 ? void 0 : _a.focus();
     }
     _handleKeyUp(e) {
         const input = e.target;
@@ -90,9 +108,6 @@ export class ExmSearchBase extends ExmgElement {
             this._hasFocus = false;
         }
     }
-    _handleInputBlur() {
-        this._hasFocus = false;
-    }
     updated(changedProperties) {
         if (changedProperties.has('_hasFocus')) {
             // after _hasFocus changed to true, focus the input