Chat - enter press should add a new line in TextArea on Mobile devices (T1293840)

Author: Zedwag

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

@@ -1,5 +1,6 @@
 import type { NativeEventInfo } from '@js/common/core/events';
 import messageLocalization from '@js/common/core/localization/message';
+import devices from '@js/core/devices';
 import $, { type dxElementWrapper } from '@js/core/renderer';
 import type { ClickEvent } from '@js/ui/button';
 import Button from '@js/ui/button';
@@ -25,6 +26,8 @@ export type MessageEnteredEvent =
 
 export type TypingStartEvent = NativeEventInfo<MessageBox, UIEvent & { target: HTMLInputElement }>;
 
+const isMobile = (): boolean => devices.current().deviceType !== 'desktop';
+
 export interface Properties extends DOMComponentProperties<MessageBox> {
   activeStateEnabled?: boolean;
 
@@ -160,14 +163,18 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
         this._updateTypingEndTimeout();
       },
       onEnterKey: (e: EnterKeyEvent): void => {
+        if (isMobile()) {
+          return;
+        }
+
         if (!e.event?.shiftKey) {
           this._sendHandler(e);
         }
       },
     });
 
     this._textArea.registerKeyHandler('enter', (event: KeyboardEvent) => {
-      if (!event.shiftKey && this._isValuableTextEntered()) {
+      if (!event.shiftKey && this._isValuableTextEntered() && !isMobile()) {
         event.preventDefault();
       }
     });

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

@@ -17,6 +17,7 @@ import EditingPreview, {
 import {
     FOCUSED_STATE_CLASS,
 } from '__internal/core/widget/widget';
+import { shouldSkipOnDesktop, shouldSkipOnMobile } from '../../../helpers/device.js';
 
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
@@ -186,6 +187,10 @@ QUnit.module('MessageBox', moduleConfig, () => {
         });
 
         QUnit.test('should be fired on enter key if the textarea input contains a value', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
             const onMessageEnteredStub = sinon.stub();
 
             this.reinit({ onMessageEntered: onMessageEnteredStub });
@@ -283,6 +288,10 @@ QUnit.module('MessageBox', moduleConfig, () => {
         });
 
         QUnit.test('should be fired with correct arguments when enter is pressed', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
             assert.expect(6);
 
             const text = '  new text message ';
@@ -306,6 +315,24 @@ QUnit.module('MessageBox', moduleConfig, () => {
                 .keyDown('enter')
                 .keyUp('enter');
         });
+
+        QUnit.test('should not send message on enter key on mobile devices (T1293840)', function(assert) {
+            if(shouldSkipOnDesktop(assert)) {
+                return;
+            }
+
+            const onMessageEnteredStub = sinon.stub();
+
+            this.reinit({ onMessageEntered: onMessageEnteredStub });
+
+            keyboardMock(this.$input)
+                .focus()
+                .type('new text message')
+                .keyDown('enter')
+                .keyUp('enter');
+
+            assert.strictEqual(onMessageEnteredStub.callCount, 0);
+        });
     });
 
     QUnit.module('onMessageEditCanceled event', () => {
@@ -693,6 +720,10 @@ QUnit.module('MessageBox', moduleConfig, () => {
         });
 
         QUnit.test('textarea should be cleared on enter key when some text is entered', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
             keyboardMock(this.$input)
                 .focus()
                 .type('some text')
@@ -703,6 +734,10 @@ QUnit.module('MessageBox', moduleConfig, () => {
         });
 
         QUnit.test('enter keydown event should be prevented if input text has non-space characters', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
             const enterKeyDownEvent = $.Event('keydown', { key: 'enter' });
 
             keyboardMock(this.$input).type('1');
@@ -733,6 +768,10 @@ QUnit.module('MessageBox', moduleConfig, () => {
         });
 
         QUnit.test('textarea should restore its height after enter press when multiline text was entered', function(assert) {
+            if(shouldSkipOnMobile(assert)) {
+                return;
+            }
+
             const initialTextAreaHeight = this.$textArea.height();
 
             keyboardMock(this.$input)