restore component inline styles after unmounting if React.strictMode (T1180862) (#860)

+test

Author: GoodDayForSurf

packages/devextreme-react/src/core/__tests__/component.test.tsx

@@ -207,6 +207,18 @@ describe('element attrs management', () => {
     expect(element.style.background).toEqual('red');
   });
 
+  it('element inline styles management in strict mode (T1180862)', () => {
+    const { container } = render(
+      <React.StrictMode>
+        <TestComponent style={{ color: 'red' }} />
+      </React.StrictMode>,
+    );
+
+    const element: HTMLElement = container?.firstChild as HTMLElement;
+
+    expect(element.style.color).toEqual('red');
+  });
+
   it('updates id, className and style', () => {
     const { container, rerender } = render(
       <TestComponent id="id1" className="class1" style={{ background: 'red' }} />,
@@ -296,7 +308,7 @@ describe('disposing', () => {
     events.on(element, 'dxremove', handleDxRemove);
 
     unmount();
-    expect(handleDxRemove).toHaveBeenCalledTimes(1);
+    expect(handleDxRemove.mock.calls.length).toBeGreaterThan(0);
   });
 
   it('remove option guards', () => {

packages/devextreme-react/src/core/__tests__/test-component.ts

@@ -1,4 +1,5 @@
 /* eslint-disable max-classes-per-file */
+import DOMComponent from 'devextreme/core/dom_component';
 import { Component } from '../component';
 
 const eventHandlers: { [index: string]: ((e?: any) => void)[] } = {};
@@ -8,6 +9,7 @@ const Widget = {
   resetOption: jest.fn(),
   beginUpdate: jest.fn(),
   endUpdate: jest.fn(),
+  element: (undefined as unknown as Element),
   on: (event: string, handler: (e: any) => void): void => {
     if (eventHandlers[event]) {
       eventHandlers[event].push(handler);
@@ -19,7 +21,12 @@ const Widget = {
     eventHandlers[event] = eventHandlers[event].filter((e) => e !== handler);
   },
   clearExtensions: jest.fn(),
-  dispose: jest.fn(),
+  dispose: jest.fn(() => {
+    if (Widget.element) {
+      const dxDomComponent = new DOMComponent(Widget.element);
+      dxDomComponent.dispose();
+    }
+  }),
   skipOptionsRollBack: false,
 };
 
@@ -35,6 +42,7 @@ class TestComponent<P = any> extends Component<P> {
     Widget.option.mockImplementation((name: string) => name === 'integrationOptions.useDeferUpdateForTemplates');
 
     super._createWidget(element);
+    Widget.element = this._element;
     Widget.option.mockReset();
   }
 

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

@@ -85,12 +85,19 @@ abstract class ComponentBase<P extends IHtmlOptions> extends React.PureComponent
   }
 
   public componentDidMount(): void {
+    const { style } = this.props;
+
     if (this._childNodes?.length) {
       this._element.append(...this._childNodes);
     } else if (this._element.childNodes.length) {
       this._childNodes = Array.from(this._element.childNodes);
     }
+
     this._updateCssClasses(null, this.props);
+
+    if (style) {
+      this._setInlineStyles(style);
+    }
   }
 
   public componentDidUpdate(prevProps: P): void {
@@ -166,6 +173,14 @@ abstract class ComponentBase<P extends IHtmlOptions> extends React.PureComponent
     return elementProps;
   }
 
+  private _setInlineStyles(styles) {
+    Object.entries(styles).forEach(
+      ([name, value]) => {
+        this._element.style[name] = value;
+      },
+    );
+  }
+
   private _updateCssClasses(prevProps: P | null, newProps: P) {
     const prevClassName = prevProps ? getClassName(prevProps) : undefined;
     const newClassName = getClassName(newProps);