Chat Editing: focus input after Edit menu item clicked (#29774)

Author: anna-shakhova

packages/devextreme/js/__internal/ui/chat/chat.ts

@@ -211,6 +211,8 @@ class Chat extends Widget<Properties> {
       isLoading,
       onMessageEditingStart: (e) => {
         this._messageEditingStartHandler(e);
+
+        return () => this.focus();
       },
       onMessageDeleting: (e) => {
         this._messageDeletingHandler(e);

packages/devextreme/js/__internal/ui/chat/messagebox.ts

@@ -117,10 +117,6 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     const $editingPreview = $('<div>').prependTo(this.element());
     const { text } = this.option();
 
-    $editingPreview.get(0).addEventListener('animationend', () => {
-      this._textArea.focus();
-    }, { once: true });
-
     this._editingPreview = this._createComponent($editingPreview, EditingPreview, {
       text,
       onCancel: () => this._cancelMessageEdit(),

packages/devextreme/js/__internal/ui/chat/messagelist.ts

@@ -88,7 +88,7 @@ export interface Properties extends WidgetOptions<MessageList> {
   showAvatar: boolean;
   showUserName: boolean;
   showMessageTimestamp: boolean;
-  onMessageEditingStart?: (e: MessageEditingEvent) => void;
+  onMessageEditingStart?: (e: MessageEditingEvent) => () => void;
   onMessageDeleting?: (e: MessageEditingEvent) => void;
   onEscapeKeyPressed?: (e: KeyboardEvent) => void;
 }
@@ -284,7 +284,14 @@ class MessageList extends Widget<Properties> {
         text: editText,
         disabled: isEditActionDisabled(message),
         onClick: (e: ItemClick): void => {
-          onMessageEditingStart?.({ event: e.event, message });
+          const onMessageEditStarted = onMessageEditingStart?.({ event: e.event, message });
+
+          const onContextMenuHidden = (): void => {
+            this._contextMenu.off('hidden', onContextMenuHidden);
+            onMessageEditStarted?.();
+          };
+
+          this._contextMenu.on('hidden', onContextMenuHidden);
         },
       });
     }

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js

@@ -427,7 +427,7 @@ QUnit.module('Chat', () => {
                 assert.strictEqual(this.$textArea.hasClass(FOCUSED_STATE_CLASS), true, 'input is focused');
             });
 
-            QUnit.skip('Input focused after context menu is hidden', function(assert) {
+            QUnit.testInActiveWindow('Input not focused after context menu is hidden by outside click', function(assert) {
                 if(!isDesktopDevice()) {
                     assert.ok(true, 'Test is not applicable for mobile devices');
                     return;
@@ -454,7 +454,7 @@ QUnit.module('Chat', () => {
                 pointerMock($bubbles.eq(0)).click();
 
                 assert.strictEqual(this.getContextMenu().option('visible'), false, 'context menu is hidden');
-                assert.strictEqual(this.$textArea.hasClass(FOCUSED_STATE_CLASS), true, 'input is focused');
+                assert.strictEqual(this.$textArea.hasClass(FOCUSED_STATE_CLASS), false, 'input is focused');
             });
 
             QUnit.testInActiveWindow('Input should be blurred after context menu is shown', function(assert) {
@@ -935,7 +935,7 @@ QUnit.module('Chat', () => {
             });
         });
 
-        QUnit.skip('editing preview should be shown after the Edit button is clicked if cancel promise rejected', function(assert) {
+        QUnit.testInActiveWindow('editing preview should be shown after the Edit button is clicked if cancel promise rejected', function(assert) {
             if(!isDesktopDevice()) {
                 assert.ok(true, 'Test is not applicable for mobile devices');
                 return;
@@ -1082,7 +1082,7 @@ QUnit.module('Chat', () => {
             }, ANIMATION_TIMEOUT);
         });
 
-        QUnit.skip('message box should have editing message text and focus after the Edit button is clicked and not cancelled', function(assert) {
+        QUnit.testInActiveWindow('message box should have editing message text and focus after the Edit button is clicked and not cancelled', function(assert) {
             if(!isDesktopDevice()) {
                 assert.ok(true, 'Test is not applicable for mobile devices');
                 return;
@@ -1111,6 +1111,37 @@ QUnit.module('Chat', () => {
             assert.strictEqual(this.textArea.option('value'), 'b', 'input contains editing message text');
             assert.strictEqual(this.$textArea.hasClass(FOCUSED_STATE_CLASS), true, 'input is focused');
         });
+
+        QUnit.testInActiveWindow('message box should have editing message text and focus after the Edit was triggered from keyboard', function(assert) {
+            if(!isDesktopDevice()) {
+                assert.ok(true, 'Test is not applicable for mobile devices');
+                return;
+            }
+
+            const items = [
+                { text: 'a', author: userFirst },
+                { text: 'b', author: userSecond },
+            ];
+
+            this.reinit({
+                focusStateEnabled: true,
+                user: userSecond,
+                editing: {
+                    allowUpdating: true
+                },
+                items,
+            });
+
+            const $bubbles = this.getBubbles();
+            $bubbles.eq(1).trigger('dxcontextmenu');
+
+            keyboardMock(this.getContextMenu().itemsContainer())
+                .press('down')
+                .press('enter');
+
+            assert.strictEqual(this.textArea.option('value'), 'b', 'input contains editing message text');
+            assert.strictEqual(this.$textArea.hasClass(FOCUSED_STATE_CLASS), true, 'input is focused');
+        });
     });
 
     QUnit.module('Events', () => {