Bugfix. Validation messages wasn't being shown

due to Awesomplete doing things to the DOM and then confusing Snabbdom.

package-lock.json

@@ -2855,12 +2855,11 @@
       }
     },
     "backbone.vdomview": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/backbone.vdomview/-/backbone.vdomview-1.0.1.tgz",
-      "integrity": "sha512-KBrzWTa3Cyd/PVq4kxcnaF653z9W5zQkP4FYGdgDa2Du4TDbMwbjaGTJa302y34oX1iOvO/BmBrLgYM+RF3F8Q==",
+      "version": "github:jcbrand/backbone.vdomview#8222ff0c12462846fd3a5d915923e42da49c417f",
       "dev": true,
       "requires": {
-        "backbone": "1.3.3"
+        "backbone": "1.3.3",
+        "snabbdom": "0.7.1"
       }
     },
     "balanced-match": {

src/converse-rosterview.js

@@ -142,26 +142,31 @@
 
                 toHTML () {
                     const label_nickname = _converse.xhr_user_search_url ? __('Contact name') : __('Optional nickname');
-                    return tpl_add_contact_modal(_.extend(this.model.toJSON(), {
+                    return  tpl_add_contact_modal(_.extend(this.model.toJSON(), {
                         '_converse': _converse,
                         'heading_new_contact': __('Add a Contact'),
                         'label_xmpp_address': __('XMPP Address'),
                         'label_nickname': label_nickname,
                         'contact_placeholder': __('name@example.org'),
                         'label_add': __('Add'),
+                        'error_message': __('Please enter a valid XMPP address')
                     }));
                 },
 
                 afterRender () {
                     if (_converse.xhr_user_search_url && _.isString(_converse.xhr_user_search_url)) {
-                        this.initXHRAutoComplete();
+                        this.initXHRAutoComplete(this.el);
                     } else {
-                        this.initJIDAutoComplete();
+                        this.initJIDAutoComplete(this.el);
                     }
+                    const jid_input = this.el.querySelector('input[name="jid"]');
+                    this.el.addEventListener('shown.bs.modal', () => {
+                        jid_input.focus();
+                    }, false);
                 },
 
-                initJIDAutoComplete () {
-                    const jid_input = this.el.querySelector('input[name="jid"]');
+                initJIDAutoComplete (root) {
+                    const jid_input = root.querySelector('input[name="jid"]');
                     const list = _.uniq(_converse.roster.map((item) => Strophe.getDomainFromJid(item.get('jid'))));
                     new Awesomplete(jid_input, {
                         'list': list,
@@ -170,12 +175,9 @@
                         },
                         'filter': Awesomplete.FILTER_STARTSWITH
                     });
-                    this.el.addEventListener('shown.bs.modal', () => {
-                        jid_input.focus();
-                    }, false);
                 },
 
-                initXHRAutoComplete () {
+                initXHRAutoComplete (root) {
                     const name_input = this.el.querySelector('input[name="name"]');
                     const jid_input = this.el.querySelector('input[name="jid"]');
                     const awesomplete = new Awesomplete(name_input, {
@@ -200,9 +202,6 @@
                         jid_input.value = ev.text.value;
                         name_input.value = ev.text.label;
                     });
-                    this.el.addEventListener('shown.bs.modal', () => {
-                        name_input.focus();
-                    }, false);
                 },
 
                 addContactFromForm (ev) {
@@ -210,14 +209,14 @@
                     const data = new FormData(ev.target),
                           jid = data.get('jid'),
                           name = data.get('name');
-                    ev.target.reset();
-
                     if (!jid || _.compact(jid.split('@')).length < 2) {
-                        this.model.set({
-                            'error_message': __('Please enter a valid XMPP address'),
-                            'jid': jid
-                        })
+                        // XXX: we have to do this manually, instead of via
+                        // toHTML because Awesomplete messes things up and
+                        // confuses Snabbdom
+                        u.addClass('is-invalid', this.el.querySelector('input[name="jid"]'));
+                        u.addClass('d-block', this.el.querySelector('.invalid-feedback'));
                     } else {
+                        ev.target.reset();
                         _converse.roster.addAndSubscribe(jid, name);
                         this.model.clear();
                         this.modal.hide();

src/templates/add_contact_modal.html

@@ -11,16 +11,14 @@
                     <div class="form-group {[ if (o._converse.xhr_user_search_url) { ]} hidden {[ } ]}">
                         <label class="clearfix" for="jid">{{{o.label_xmpp_address}}}:</label>
                         <input type="text" name="jid" required="required" value="{{{o.jid}}}"
-                               class="form-control {[ if (o.error_message) { ]} is-invalid {[ } ]}"
+                               class="form-control"
                                placeholder="{{{o.contact_placeholder}}}"/>
-                        {[ if (o.error_message) { ]}
-                            <div class="invalid-feedback">{{{o.error_message}}}</div>
-                        {[ } ]}
+                        <div class="invalid-feedback">{{{o.error_message}}}</div>
                     </div>
                     <div class="form-group">
                         <label class="clearfix" for="name">{{{o.label_nickname}}}:</label>
                         <input type="text" name="name" value="{{{o.nickname}}}"
-                               class="form-control {[ if (o.error_message) { ]} is-invalid {[ } ]}"
+                               class="form-control"
                                placeholder="{{{o.nickname_placeholder}}}"/>
                     </div>
                 </div>

webpack.config.js

@@ -16,15 +16,15 @@ const config = {
     module: {
         rules: [
         {
-            test: path.resolve(__dirname, "node_modules/backbone.overview/dist/backbone.orderedlistview"),
+            test: path.resolve(__dirname, "node_modules/backbone.overview/backbone.orderedlistview"),
             use: 'imports-loader?backbone.nativeview'
         },
         {
-            test: path.resolve(__dirname, "node_modules/backbone.overview/dist/backbone.overview"),
+            test: path.resolve(__dirname, "node_modules/backbone.overview/backbone.overview"),
             use: 'imports-loader?backbone.nativeview'
         },
         {
-            test: path.resolve(__dirname, "node_modules/backbone.vdomview/dist/backbone.vdomview"),
+            test: path.resolve(__dirname, "node_modules/backbone.vdomview/backbone.vdomview"),
             use: 'imports-loader?backbone.nativeview'
         },
         {
@@ -83,9 +83,9 @@ const config = {
             "backbone":                 path.resolve(__dirname, "node_modules/backbone/backbone"),
             "backbone.browserStorage":  path.resolve(__dirname, "node_modules/backbone.browserStorage/backbone.browserStorage"),
             "backbone.nativeview":      path.resolve(__dirname, "node_modules/backbone.nativeview/backbone.nativeview"),
-            "backbone.orderedlistview": path.resolve(__dirname, "node_modules/backbone.overview/dist/backbone.orderedlistview"),
-            "backbone.overview":        path.resolve(__dirname, "node_modules/backbone.overview/dist/backbone.overview"),
-            "backbone.vdomview":        path.resolve(__dirname, "node_modules/backbone.vdomview/dist/backbone.vdomview"),
+            "backbone.orderedlistview": path.resolve(__dirname, "node_modules/backbone.overview/backbone.orderedlistview"),
+            "backbone.overview":        path.resolve(__dirname, "node_modules/backbone.overview/backbone.overview"),
+            "backbone.vdomview":        path.resolve(__dirname, "node_modules/backbone.vdomview/backbone.vdomview"),
             "bootstrap":                path.resolve(__dirname, "node_modules/bootstrap.native/dist/bootstrap-native-v4"),
             "crypto":                   path.resolve(__dirname, "node_modules/otr/build/dep/crypto"),
             "emojione":                 path.resolve(__dirname, "node_modules/emojione/lib/js/emojione"),