Chat: Add button disabled if textarea has not text

DevExpress · Sep 5, 2024 · 8633d3b · 8633d3b
1 parent 22ff217
commit 8633d3b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git 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<MessageBox, Properties> {
       activeStateEnabled,
       focusStateEnabled,
       hoverStateEnabled,
+      onInput: ({ component }): void => {
+        const { text } = component.option();
+        const isButtonDisabled = !text;
+
+        this._toggleButtonDisableState(isButtonDisabled);
+      },
     });
   }
 
@@ -94,6 +100,7 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
       hoverStateEnabled,
       icon: 'send',
       stylingMode: 'text',
+      disabled: true,
       onClick: (e): void => {
         this._sendHandler(e);
       },
@@ -115,7 +122,12 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     }
 
     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<Properties>): void {

diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
@@ -52,9 +52,8 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <div id="button"></div>
         <script>
             $(function() {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: function() { alert("clicked"); }
+                $("#button").dxChat({
+                    height: 600,
                 });
             });
         </script>

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
@@ -46,6 +46,7 @@ QUnit.module('MessageBox', moduleConfig, () => {
             const expectedOptions = {
                 icon: 'send',
                 stylingMode: 'text',
+                disabled: true,
             };
             const sendButton = this.$sendButton.dxButton('instance');