From 385280c5bdda60f2c3572e99ea744295f7772bc1 Mon Sep 17 00:00:00 2001
From: volvl <dxvladislavvolkov@users.noreply.github.com>
Date: Wed, 11 Dec 2024 16:54:27 +0400
Subject: [PATCH] Set dx-classes when resetting custom class in vue (#28538)

---
 .../src/core/__tests__/textbox.test.ts        | 24 +++++++++++++++++++
 packages/devextreme-vue/src/core/component.ts |  2 +-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/devextreme-vue/src/core/__tests__/textbox.test.ts b/packages/devextreme-vue/src/core/__tests__/textbox.test.ts
index 29a3885f9b56..bb60c478f8ac 100644
--- a/packages/devextreme-vue/src/core/__tests__/textbox.test.ts
+++ b/packages/devextreme-vue/src/core/__tests__/textbox.test.ts
@@ -82,4 +82,28 @@ describe('two-way binding', () => {
       expect(component.element.classList.toString()).toBe('custom2 dx-show-invalid-badge dx-textbox dx-texteditor dx-editor-outlined dx-texteditor-empty dx-widget');
     });
   });
+
+  it('dxClass should be set when class attr is undefined', async () => {
+    expect.assertions(1);
+    const vm = defineComponent({
+      template:
+                `<dx-text-box id="component" :class="{custom: customClass}"></dx-text-box>
+                `,
+      components: {
+        DxTextBox,
+      },
+      props: {
+        customClass: {
+          type: String,
+          default: true,
+        },
+      },
+    });
+    const wrapper = mount(vm);
+    const component = wrapper.getComponent('#component');
+    await wrapper.setProps({ customClass: false });
+    await nextTick(() => {
+      expect(component.element.classList.toString()).toBe(' dx-show-invalid-badge dx-textbox dx-texteditor dx-editor-outlined dx-texteditor-empty dx-widget');
+    });
+  });
 });
diff --git a/packages/devextreme-vue/src/core/component.ts b/packages/devextreme-vue/src/core/component.ts
index de579a29874a..f09aec6d430b 100644
--- a/packages/devextreme-vue/src/core/component.ts
+++ b/packages/devextreme-vue/src/core/component.ts
@@ -54,7 +54,7 @@ function getAttrs(attrs, dxClasses: string[]) {
   const attributes = {};
   includeAttrs.forEach((attr) => {
     const attrValue = attrs[attr];
-    if (attrValue) {
+    if (attrValue !== undefined && attrValue !== null) {
       attributes[attr] = attr === 'class' && dxClasses.length ? `${attrValue} ${dxClasses.join(' ')}` : attrValue;
     }
   });