Add an autocomplete component

spec/autocomplete.js

@@ -58,7 +58,7 @@
             textarea.value = '@';
             view.onKeyUp(at_event);
 
-            expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(4);
+            await u.waitUntil(() => view.el.querySelectorAll('.suggestion-box__results li').length === 4);
             expect(view.el.querySelector('.suggestion-box__results li:first-child').textContent).toBe('dick');
             expect(view.el.querySelector('.suggestion-box__results li:nth-child(2)').textContent).toBe('harry');
             expect(view.el.querySelector('.suggestion-box__results li:nth-child(3)').textContent).toBe('jane');
@@ -100,7 +100,7 @@
             }
             view.onKeyDown(tab_event);
             view.onKeyUp(tab_event);
-            expect(view.el.querySelector('.suggestion-box__results').hidden).toBeFalsy();
+            await u.waitUntil(() => view.el.querySelector('.suggestion-box__results').hidden === false);
             expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(1);
             expect(view.el.querySelector('.suggestion-box__results li').textContent).toBe('some1');
 
@@ -115,7 +115,7 @@
                 textarea.value = textarea.value.slice(0, textarea.value.length-1)
                 view.onKeyUp(backspace_event);
             }
-            expect(view.el.querySelector('.suggestion-box__results').hidden).toBeTruthy();
+            await u.waitUntil(() => view.el.querySelector('.suggestion-box__results').hidden === true);
 
             presence = $pres({
                     'to': 'romeo@montague.lit/orchard',
@@ -132,7 +132,7 @@
             textarea.value = "hello s s";
             view.onKeyDown(tab_event);
             view.onKeyUp(tab_event);
-            expect(view.el.querySelector('.suggestion-box__results').hidden).toBeFalsy();
+            await u.waitUntil(() => view.el.querySelector('.suggestion-box__results').hidden === false);
             expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(2);
 
             const up_arrow_event = {
@@ -170,10 +170,11 @@
             textarea.value = "hello z";
             view.onKeyDown(tab_event);
             view.onKeyUp(tab_event);
+            await u.waitUntil(() => view.el.querySelector('.suggestion-box__results').hidden === false);
 
             view.onKeyDown(tab_event);
             view.onKeyUp(tab_event);
-            expect(textarea.value).toBe('hello @z3r0 ');
+            await u.waitUntil(() => textarea.value === 'hello @z3r0 ');
             done();
         }));
 
@@ -212,7 +213,7 @@
             view.onKeyDown(backspace_event);
             textarea.value = "hello @some1"; // Mimic backspace
             view.onKeyUp(backspace_event);
-            expect(view.el.querySelector('.suggestion-box__results').hidden).toBeFalsy();
+            await u.waitUntil(() => view.el.querySelector('.suggestion-box__results').hidden === false);
             expect(view.el.querySelectorAll('.suggestion-box__results li').length).toBe(1);
             expect(view.el.querySelector('.suggestion-box__results li').textContent).toBe('some1');
             done();

src/components/autocomplete.js

+import { AutoComplete, FILTER_CONTAINS, FILTER_STARTSWITH } from "../converse-autocomplete.js";
+import { CustomElement } from './element.js';
+import { html } from 'lit-element';
+
+
+export class AutoCompleteComponent extends CustomElement {
+
+    static get properties () {
+        return {
+            'getAutoCompleteList': { type: Function },
+            'auto_evaluate': { type: Boolean },
+            'auto_first': { type: Boolean }, // Should the first element be automatically selected?
+            'filter': { type: String },
+            'include_triggers': { type: String },
+            'min_chars': { type: Number },
+            'name': { type: String },
+            'placeholder': { type: String },
+            'triggers': { type: String },
+        }
+    }
+
+    constructor () {
+        super();
+        this.auto_evaluate = true; // Should evaluation happen automatically without any particular key as trigger?
+        this.auto_first = false; // Should the first element be automatically selected?
+        this.filter = 'contains';
+        this.include_triggers = ''; // Space separated chars which should be included in the returned value
+        this.match_current_word = false; // Match only the current word, otherwise all input is matched
+        this.max_items = 10;
+        this.min_chars = 1;
+        this.triggers = ''; // String of space separated chars
+    }
+
+    render () {
+        return html`
+            <div class="suggestion-box suggestion-box__name">
+                <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
+                <input type="text" name="${this.name}"
+                       autocomplete="off"
+                       @keydown=${this.onKeyDown}
+                       @keyup=${this.onKeyUp}
+                       class="form-control suggestion-box__input"
+                       placeholder="${this.placeholder}"/>
+                <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
+            </div>
+        `;
+    }
+
+    firstUpdated () {
+        this.auto_complete = new AutoComplete(this.firstElementChild, {
+            'ac_triggers': this.triggers.split(' '),
+            'auto_evaluate': this.auto_evaluate,
+            'auto_first': this.auto_first,
+            'filter': this.filter == 'contains' ? FILTER_CONTAINS : FILTER_STARTSWITH,
+            'include_triggers': [],
+            'list': () => this.getAutoCompleteList(),
+            'match_current_word': true,
+            'max_items': this.max_items,
+            'min_chars': this.min_chars,
+        });
+        this.auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
+    }
+
+    onKeyDown (ev) {
+        this.auto_complete.onKeyDown(ev);
+    }
+
+    onKeyUp (ev) {
+        this.auto_complete.evaluate(ev);
+    }
+}
+
+window.customElements.define('converse-autocomplete', AutoCompleteComponent);