fix(gv-autocomplete): close options panel when selecting option

Fixes #296

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,

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));
+      },
     },
   ],
 });

wc/gv-chart-bar.js

@@ -1 +1 @@
-import '../src/charts/gv-chart-bar';
+import '../src/charts/gv-chart-bar';