From 37c3d37ee4f94632a7aba744624b1b3c0b6acde6 Mon Sep 17 00:00:00 2001
From: Lorie Pisicchio <lorie.pisicchio@gmail.com>
Date: Tue, 2 Mar 2021 16:14:11 +0100
Subject: [PATCH] fix(gv-autocomplete): close options panel when selecting
 option

Fixes #296
---
 src/atoms/gv-autocomplete.js             | 10 ++++++++--
 stories/atoms/gv-autocomplete.stories.js | 14 +++++++++-----
 wc/gv-chart-bar.js                       |  2 +-
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/atoms/gv-autocomplete.js b/src/atoms/gv-autocomplete.js
index 4a61088f..318d5d26 100644
--- a/src/atoms/gv-autocomplete.js
+++ b/src/atoms/gv-autocomplete.js
@@ -256,7 +256,8 @@ export class GvAutocomplete extends LitElement {
   render() {
     const options = this._getFilteredOptions();
     let open = false;
-    if ((options && options.length > 0 && this._forceOpen) || this._hasNoOptionSlot()) {
+
+    if (options && options.length > 0 && this._forceOpen) {
       open = this.minChars === 0 || this.value.trim().length >= this.minChars;
     }
 
@@ -270,11 +271,16 @@ export class GvAutocomplete extends LitElement {
       options: true,
       open,
     };
+
     return html` <div class="container">
       ${this._renderStyle()}
       <slot></slot>
+      ${this._hasNoOptionSlot() && this._forceOpen
+        ? html`<div class="options open" style="${styleMap({ top: `${top}px` })}">
+            <slot name="noOption" class="${!options || options.length === 0 ? 'show' : 'hide'}"></slot>
+          </div>`
+        : ''}
       <div class="${classMap(classes)}" @mouseleave="${this._onMouseLeave}" style="${styleMap({ top: `${top}px` })}">
-        <slot name="noOption" class="${!options || options.length === 0 ? 'show' : 'hide'}"></slot>
         ${repeat(
           options,
           (option) => option,
diff --git a/stories/atoms/gv-autocomplete.stories.js b/stories/atoms/gv-autocomplete.stories.js
index b129bab8..f88e6138 100644
--- a/stories/atoms/gv-autocomplete.stories.js
+++ b/stories/atoms/gv-autocomplete.stories.js
@@ -226,18 +226,22 @@ export const CustomElement = makeStory(conf, {
     `,
 });
 
+const users = [{ value: 'John' }, { value: 'Jack' }, { value: 'Jane' }, { value: 'Steeve' }, { value: 'Tony' }, { value: 'Axel' }];
 export const NoOptionsSlot = makeStory(conf, {
   items: [
     {
-      options: [],
+      options: users,
       innerHTML: `
-        <gv-input placeholder='Type something…'></gv-input>
+        <gv-input placeholder='Type some unavailable option like Jim…'></gv-input>
         <div slot='noOption' style='display:flex;flex-direction:row;align-items:center;justify-content:space-around'>
             <span>No matching option found</span>
-            <gv-button @click='(e) => console.log(e)'>
-                Add one
-            </gv-button>
+            <gv-button>Add one</gv-button>
         </div>`,
+      '@gv-autocomplete:search': (event) => {
+        const detail = event.detail;
+        const component = event.target;
+        component.options = users.filter((user) => user.value.includes(detail));
+      },
     },
   ],
 });
diff --git a/wc/gv-chart-bar.js b/wc/gv-chart-bar.js
index 76b80543..d865ad64 100644
--- a/wc/gv-chart-bar.js
+++ b/wc/gv-chart-bar.js
@@ -1 +1 @@
-import '../src/charts/gv-chart-bar';
+import '../src/charts/gv-chart-bar';
\ No newline at end of file