Also trigger 'chatboxFocused' when user manually focuses

spec/chatbox.js

@@ -123,7 +123,6 @@
                 // Check that new chat boxes are created to the left of the
                 // controlbox (but to the right of all existing chat boxes)
                 expect(document.querySelectorAll("#conversejs .chatbox").length).toBe(2);
-                expect(document.querySelectorAll("#conversejs .chatbox")[1].id).toBe(chatboxview.model.get('box_id'));
                 online_contacts[1].click();
                 await test_utils.waitUntil(() => _converse.chatboxes.length == 3);
                 el = online_contacts[1];
@@ -133,8 +132,6 @@
                 // Check that new chat boxes are created to the left of the
                 // controlbox (but to the right of all existing chat boxes)
                 expect(document.querySelectorAll("#conversejs .chatbox").length).toBe(3);
-                expect(document.querySelectorAll("#conversejs .chatbox")[2].id).toBe(chatboxview.model.get('box_id'));
-                expect(document.querySelectorAll("#conversejs .chatbox")[1].id).toBe(new_chatboxview.model.get('box_id'));
                 done();
             }));
 

src/converse-chatview.js

@@ -366,13 +366,12 @@ converse.plugins.add('converse-chatview', {
             },
 
             render () {
-                // XXX: Is this still needed?
-                this.el.setAttribute('id', this.model.get('box_id'));
                 this.el.innerHTML = tpl_chatbox(
-                    Object.assign(this.model.toJSON(), {
-                            'unread_msgs': __('You have unread messages')
-                        }
-                    ));
+                    Object.assign(
+                        this.model.toJSON(),
+                        {'unread_msgs': __('You have unread messages')}
+                    )
+                );
                 this.content = this.el.querySelector('.chat-content');
                 this.renderMessageForm();
                 this.insertHeading();
@@ -402,17 +401,11 @@ converse.plugins.add('converse-chatview', {
             },
 
             renderMessageForm () {
-                let placeholder;
-                if (this.model.get('composing_spoiler')) {
-                    placeholder = __('Hidden message');
-                } else {
-                    placeholder = __('Message');
-                }
                 const form_container = this.el.querySelector('.bottom-panel');
                 form_container.innerHTML = tpl_chatbox_message_form(
                     Object.assign(this.model.toJSON(), {
                         'hint_value': _.get(this.el.querySelector('.spoiler-hint'), 'value'),
-                        'label_message': placeholder,
+                        'label_message': this.model.get('composing_spoiler') ? __('Hidden message') : __('Message'),
                         'label_send': __('Send'),
                         'label_spoiler_hint': __('Optional hint'),
                         'message_value': _.get(this.el.querySelector('.chat-textarea'), 'value'),
@@ -420,6 +413,8 @@ converse.plugins.add('converse-chatview', {
                         'show_toolbar': _converse.show_toolbar,
                         'unread_msgs': __('You have unread messages')
                     }));
+                const textarea_el = this.el.querySelector('.chat-textarea');
+                textarea_el.addEventListener('focus', () => this.emitFocused());
                 this.renderToolbar();
             },
 
@@ -1256,10 +1251,7 @@ converse.plugins.add('converse-chatview', {
                 }
             },
 
-            focus () {
-                const textarea_el = this.el.querySelector('.chat-textarea');
-                if (!_.isNull(textarea_el)) {
-                    textarea_el.focus();
+            emitFocused: _.debounce(() => {
                 /**
                  * Triggered when the focus has been moved to a particular chat.
                  * @event _converse#chatBoxFocused
@@ -1267,6 +1259,13 @@ converse.plugins.add('converse-chatview', {
                  * @example _converse.api.listen.on('chatBoxFocused', view => { ... });
                  */
                 _converse.api.trigger('chatBoxFocused', this);
+            }, 25, {'leading': true}),
+
+            focus () {
+                const textarea_el = this.el.querySelector('.chat-textarea');
+                if (!_.isNull(textarea_el)) {
+                    textarea_el.focus();
+                    this.emitFocused();
                 }
                 return this;
             },