Use autocomplete component

src/headless/plugins/roster/utils.js

@@ -1,6 +1,7 @@
 import _converse from '../../shared/_converse.js';
 import api, { converse } from '../../shared/api/index.js';
 import log from "../../log.js";
+import { Strophe } from 'strophe.js';
 import { Model } from '@converse/skeletor/src/model.js';
 import { RosterFilter } from '../../plugins/roster/filter.js';
 import { STATUS_WEIGHTS } from "../../shared/constants";
@@ -241,3 +242,7 @@ export function getGroupsAutoCompleteList () {
     const groups = roster.reduce((groups, contact) => groups.concat(contact.get('groups')), []);
     return [...new Set(groups.filter(i => i))];
 }
+
+export function getJIDsAutoCompleteList () {
+    return [...new Set(_converse.roster.map(item => Strophe.getDomainFromJid(item.get('jid'))))];
+}

src/plugins/rosterview/modals/add-contact.js

@@ -24,38 +24,6 @@ export default class AddContactModal extends BaseModal {
         return __('Add a Contact');
     }
 
-    afterRender () {
-        if (typeof api.settings.get('xhr_user_search_url') === 'string') {
-            this.initXHRAutoComplete();
-        } else {
-            this.initJIDAutoComplete();
-        }
-    }
-
-    initJIDAutoComplete () {
-        if (!api.settings.get('autocomplete_add_contact')) {
-            return;
-        }
-        const el = this.querySelector('.suggestion-box__jid').parentElement;
-        this.jid_auto_complete = new _converse.AutoComplete(el, {
-            'data': (text, input) => `${input.slice(0, input.indexOf("@"))}@${text}`,
-            'filter': _converse.FILTER_STARTSWITH,
-            'list': [...new Set(_converse.roster.map(item => Strophe.getDomainFromJid(item.get('jid'))))]
-        });
-    }
-
-    initGroupAutoComplete () {
-        if (!api.settings.get('autocomplete_add_contact')) {
-            return;
-        }
-        const el = this.querySelector('.suggestion-box__jid').parentElement;
-        this.jid_auto_complete = new _converse.AutoComplete(el, {
-            'data': (text, input) => `${input.slice(0, input.indexOf("@"))}@${text}`,
-            'filter': _converse.FILTER_STARTSWITH,
-            'list': [...new Set(_converse.roster.map(item => Strophe.getDomainFromJid(item.get('jid'))))]
-        });
-    }
-
     initXHRAutoComplete () {
         if (!api.settings.get('autocomplete_add_contact')) {
             return this.initXHRFetch();

src/plugins/rosterview/modals/templates/add-contact.js

@@ -1,6 +1,6 @@
 import { __ } from 'i18n';
-import { api } from '@converse/headless';
-import { getGroupsAutoCompleteList } from '@converse/headless/plugins/roster/utils.js';
+import { _converse, api } from '@converse/headless';
+import { getGroupsAutoCompleteList, getJIDsAutoCompleteList } from '@converse/headless/plugins/roster/utils.js';
 import { html } from "lit";
 
 
@@ -18,28 +18,47 @@ export default (el) => {
                 <span class="modal-alert"></span>
                 <div class="form-group add-xmpp-contact__jid">
                     <label class="clearfix" for="jid">${i18n_xmpp_address}:</label>
-                    <div class="suggestion-box suggestion-box__jid">
-                        <ul class="suggestion-box__results suggestion-box__results--below" hidden=""></ul>
-                        <input type="text" name="jid" ?required=${(!api.settings.get('xhr_user_search_url'))}
+                    ${api.settings.get('autocomplete_add_contact') ?
+                        html`<converse-autocomplete
+                            .list=${getJIDsAutoCompleteList()}
+                            .data=${(text, input) => `${input.slice(0, input.indexOf("@"))}@${text}`}
+                            position="below"
+                            filter=${_converse.FILTER_STARTSWITH}
+                            ?required=${(!api.settings.get('xhr_user_search_url'))}
                             value="${el.model.get('jid') || ''}"
-                            class="form-control suggestion-box__input"
-                            placeholder="${i18n_contact_placeholder}"/>
-                        <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
-                    </div>
+                            placeholder="${i18n_contact_placeholder}"
+                            name="jid"></converse-autocomplete>` :
+
+                        html`<input type="text" name="jid"
+                            ?required=${(!api.settings.get('xhr_user_search_url'))}
+                            value="${el.model.get('jid') || ''}"
+                            class="form-control"
+                            placeholder="${i18n_contact_placeholder}"/>`
+                    }
                 </div>
 
                 <div class="form-group add-xmpp-contact__name">
                     <label class="clearfix" for="name">${i18n_nickname}:</label>
-                    <div class="suggestion-box suggestion-box__name">
-                        <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
-                        <input type="text" name="name" value="${el.model.get('nickname') || ''}"
-                            class="form-control suggestion-box__input"/>
-                        <span class="suggestion-box__additions visually-hidden" role="status" aria-live="assertive" aria-relevant="additions"></span>
-                    </div>
+                    ${api.settings.get('autocomplete_add_contact') && typeof api.settings.get('xhr_user_search_url') === 'string' ?
+                        html`<converse-autocomplete
+                            .list=${getJIDsAutoCompleteList()}
+                            .data=${(text, input) => `${input.slice(0, input.indexOf("@"))}@${text}`}
+                            filter=${_converse.FILTER_STARTSWITH}
+                            value="${el.model.get('nickname') || ''}"
+                            placeholder="${i18n_contact_placeholder}"
+                            name="name"></converse-autocomplete>` :
+
+                        html`<input type="text" name="name"
+                            value="${el.model.get('nickname') || ''}"
+                            class="form-control"
+                            placeholder="${i18n_contact_placeholder}"/>`
+                    }
                 </div>
                 <div class="form-group add-xmpp-contact__group">
                     <label class="clearfix" for="name">${i18n_group}:</label>
-                    <converse-autocomplete .list=${getGroupsAutoCompleteList()} name="group"></converse-autocomplete>
+                    <converse-autocomplete
+                        .list=${getGroupsAutoCompleteList()}
+                        name="group"></converse-autocomplete>
                 </div>
                 <div class="form-group"><div class="invalid-feedback">${i18n_error_message}</div></div>
                 <button type="submit" class="btn btn-primary">${i18n_add}</button>

src/shared/autocomplete/component.js

@@ -14,6 +14,8 @@ import { html } from 'lit';
  *  Should the `focus` attribute be set on the input element?
  * @property { Function } getAutoCompleteList
  *  A function that returns the list of autocomplete suggestions
+ * @property { Function } data
+ *  A function that maps the returned matches into the correct format
  * @property { Array } list
  *  An array of suggestions, to be used instead of the `getAutoCompleteList` *  function
  * @property { Boolean } [auto_evaluate=true]
@@ -46,6 +48,7 @@ export default class AutoCompleteComponent extends CustomElement {
             'position': { type: String },
             'autofocus': { type: Boolean },
             'getAutoCompleteList': { type: Function },
+            'data': { type: Function },
             'list': { type: Array },
             'auto_evaluate': { type: Boolean },
             'auto_first': { type: Boolean },
@@ -54,6 +57,7 @@ export default class AutoCompleteComponent extends CustomElement {
             'min_chars': { type: Number },
             'name': { type: String },
             'placeholder': { type: String },
+            'value': { type: String },
             'triggers': { type: String },
             'required': { type: Boolean },
         };
@@ -61,6 +65,8 @@ export default class AutoCompleteComponent extends CustomElement {
 
     constructor () {
         super();
+        this.data = (a) => a;
+        this.value = '';
         this.position = 'above';
         this.auto_evaluate = true;
         this.auto_first = false;
@@ -86,6 +92,7 @@ export default class AutoCompleteComponent extends CustomElement {
                     @keydown=${this.onKeyDown}
                     @keyup=${this.onKeyUp}
                     class="form-control suggestion-box__input"
+                    value="${this.value}"
                     placeholder="${this.placeholder}"
                 />
                 <span
@@ -106,6 +113,7 @@ export default class AutoCompleteComponent extends CustomElement {
             'filter': this.filter == 'contains' ? FILTER_CONTAINS : FILTER_STARTSWITH,
             'include_triggers': [],
             'list': this.list ?? ((q) => this.getAutoCompleteList(q)),
+            'data': this.data,
             'match_current_word': true,
             'max_items': this.max_items,
             'min_chars': this.min_chars,