diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts b/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts index 51fe0831c54d..c228f87622aa 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts +++ b/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts @@ -74,6 +74,12 @@ class MessageBox extends DOMComponent { activeStateEnabled, focusStateEnabled, hoverStateEnabled, + onInput: ({ component }): void => { + const { text } = component.option(); + const isButtonDisabled = !text; + + this._toggleButtonDisableState(isButtonDisabled); + }, }); } @@ -94,6 +100,7 @@ class MessageBox extends DOMComponent { hoverStateEnabled, icon: 'send', stylingMode: 'text', + disabled: true, onClick: (e): void => { this._sendHandler(e); }, @@ -115,7 +122,12 @@ class MessageBox extends DOMComponent { } this._messageSendAction?.({ text, event: e.event }); - this._textArea?.reset(); + this._textArea.reset(); + this._toggleButtonDisableState(true); + } + + _toggleButtonDisableState(isButtonDisabled: boolean): void { + this._button.option('disabled', isButtonDisabled); } _optionChanged(args: OptionChanged): void { diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html index fde766f17218..63b82eef0f99 100644 --- a/packages/devextreme/playground/jquery.html +++ b/packages/devextreme/playground/jquery.html @@ -52,9 +52,8 @@

Te
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js index 026cdb0843c2..7b690b293a7c 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageBox.tests.js @@ -46,6 +46,7 @@ QUnit.module('MessageBox', moduleConfig, () => { const expectedOptions = { icon: 'send', stylingMode: 'text', + disabled: true, }; const sendButton = this.$sendButton.dxButton('instance');