Fix: Dynamic styles are not applied in React (T1292179) (#30045)

Author: ajivanyandev

e2e/wrappers/builders/angular19/src/utils/componentFinder.ts

@@ -9,6 +9,11 @@ export const COMPONENTS = [
     name: 'InputsListInForm',
     component: import('@external/inputs-list-in-form/angular19/inputs-list-in-form.component').then((m) => m.InputsListInFormComponent),
   },
+  {
+    path: 'text-box-dynamic-styles',
+    name: 'TextBoxDynamicStyles',
+    component: import('@external/text-box-dynamic-styles/angular19/text-box-dynamic-styles.component').then((m) => m.TextBoxDynamicStylesComponent),
+  },
 ];
 
 export function findComponentByPath(path: string) {

e2e/wrappers/builders/react19/src/utils/componentFinder.js

@@ -8,7 +8,12 @@ const COMPONENTS = [
     path: 'inputs-list-in-form',
     name: 'InputsListInForm',
     component: () => import('@examples/inputs-list-in-form/react19/index.jsx')
-}
+  },
+  {
+    path: 'text-box-dynamic-styles',
+    name: 'TextBoxDynamicStyles',
+    component: () => import('@examples/text-box-dynamic-styles/react19/index.jsx')
+  }
 ];
 
 export function getAllComponents() {

e2e/wrappers/builders/vue3/src/utils/componentFinder.js

@@ -5,9 +5,14 @@ const COMPONENTS = [
       component: () => import('@examples/button/vue3/index.vue')
     },
     {
-        path: 'inputs-list-in-form',
-        name: 'InputsListInForm',
-        component: () => import('@examples/inputs-list-in-form/vue3/index.vue')
+      path: 'inputs-list-in-form',
+      name: 'InputsListInForm',
+      component: () => import('@examples/inputs-list-in-form/vue3/index.vue')
+    },
+    {
+      path: 'text-box-dynamic-styles',
+      name: 'TextBoxDynamicStyles',
+      component: () => import('@examples/text-box-dynamic-styles/vue3/index.vue')
     }
   ];
 

e2e/wrappers/examples/text-box-dynamic-styles/angular19/index.ts

@@ -0,0 +1,6 @@
+import { TextBoxDynamicStylesComponent } from './text-box-dynamic-styles.component';
+
+export default {
+  component: TextBoxDynamicStylesComponent,
+  path: 'text-box-dynamic-styles'
+}; 

e2e/wrappers/examples/text-box-dynamic-styles/angular19/text-box-dynamic-styles.component.ts

@@ -0,0 +1,38 @@
+import { Component } from '@angular/core';
+import { DxTextBoxModule } from 'devextreme-angular';
+
+@Component({
+  selector: 'app-text-box-dynamic-styles',
+  standalone: true,
+  imports: [DxTextBoxModule],
+  template: `
+    <dx-text-box
+      [value]="value"
+      (onValueChanged)="onValueChanged($event)"
+      [style]="boxStyle">
+    </dx-text-box>
+  `
+})
+export class TextBoxDynamicStylesComponent {
+  value = '';
+  boxStyle: { [key: string]: string } = {};
+
+  private colors = [
+    'rgb(255, 99, 132)',
+    'rgb(54, 162, 235)',
+    'rgb(255, 206, 86)',
+    'rgb(75, 192, 192)',
+    'rgb(153, 102, 255)',
+  ];
+  private colorIndex = 0;
+
+  onValueChanged(e: any): void {
+    this.value = e.value;
+
+    this.boxStyle = {
+      backgroundColor: this.colors[this.colorIndex],
+    };
+
+    this.colorIndex = (this.colorIndex + 1) % this.colors.length;
+  }
+}

e2e/wrappers/examples/text-box-dynamic-styles/react19/index.jsx

@@ -0,0 +1,43 @@
+import React, { useState, useCallback } from "react";
+import { TextBox as DxTextBox } from "devextreme-react/text-box";
+
+const colors = [
+  'rgb(255, 99, 132)',
+  'rgb(54, 162, 235)',
+  'rgb(255, 206, 86)',
+  'rgb(75, 192, 192)',
+  'rgb(153, 102, 255)',
+];
+let colorIndex = 0;
+
+export default function TextBoxDynamicStyles() {
+  const [value, setValue] = useState('');
+  const [enableInlineStyles, setEnableInlineStyles] = useState(false);
+
+  const onValueChanged = useCallback((e) => {
+    setValue(e.value);
+    setEnableInlineStyles(true);
+  }, []);
+
+  const getStyle = () => {
+    if (enableInlineStyles) {
+      const changedStyle = {
+        backgroundColor: colors[colorIndex],
+      };
+
+      colorIndex = (colorIndex + 1) % colors.length;
+      return changedStyle;
+    }
+    return undefined;
+  };
+  return (
+    <div>
+      <DxTextBox
+        value={value}
+        onValueChanged={onValueChanged}
+        style={getStyle()}
+      />
+    </div>
+  );
+};
+

e2e/wrappers/examples/text-box-dynamic-styles/vue3/index.vue

@@ -0,0 +1,40 @@
+<template>
+  <DxTextBox
+    :value="value"
+    @value-changed="onValueChanged"
+    :style="getStyle()" />
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import DxTextBox from 'devextreme-vue/text-box';
+
+const value = ref('');
+const enableInlineStyles = ref(false);
+
+const colors = [
+  'rgb(255, 99, 132)',
+  'rgb(54, 162, 235)',
+  'rgb(255, 206, 86)',
+  'rgb(75, 192, 192)',
+  'rgb(153, 102, 255)'
+];
+let colorIndex = 0;
+
+function onValueChanged(e) {
+  value.value = e.value;
+  enableInlineStyles.value = true;
+}
+
+function getStyle() {
+  if (enableInlineStyles.value) {
+    const changedStyle = {
+      backgroundColor: colors[colorIndex],
+    };
+
+    colorIndex = (colorIndex + 1) % colors.length;
+    return changedStyle;
+  }
+  return {};
+}
+</script>

e2e/wrappers/tests/textbox.test.js

@@ -0,0 +1,25 @@
+import { Selector } from 'testcafe';
+import { testInFramework } from '../test-helpers';
+
+testInFramework('TextBox Dynamic Styles scenarios', 'text-box-dynamic-styles', [
+    'TextBox should update inline styles',
+    async (t) => {
+        const textboxWrapper = Selector('.dx-textbox');
+        const textboxInput = Selector('.dx-texteditor-input');
+        await t.expect(textboxWrapper.exists).ok('TextBox Wrapper should exist');
+        await t.expect(textboxInput.exists).ok('TextBox Input should exist');
+        await t
+        .typeText(textboxInput, 'trigger')
+        .pressKey('enter')
+        .expect(textboxInput.value)
+        .eql('trigger')
+        .expect(textboxWrapper.getStyleProperty('background-color'))
+        .eql('rgb(255, 99, 132)')
+        .typeText(textboxInput, ' again')
+        .pressKey('enter')
+        .expect(textboxInput.value)
+        .eql('trigger again')
+        .expect(textboxWrapper.getStyleProperty('background-color'))
+        .eql('rgb(54, 162, 235)');
+    },
+]);

packages/devextreme-react/src/core/component-base.tsx

@@ -199,7 +199,7 @@ const ComponentBase = forwardRef<ComponentBaseRef, any>(
         }
       });
       return elementProps;
-    }, [element.current]);
+    }, [element.current, props]);
 
     const scheduleTemplatesUpdate = useCallback(() => {
       if (guardsUpdateScheduled.current) {