Use ref as target for FileUploader options (fix T1183211) (#864)

Author: dxvladislavvolkov

packages/devextreme-react/src/core/__tests__/props-updating.test.tsx

@@ -102,6 +102,27 @@ describe('option update', () => {
     expect(Widget.option.mock.calls[0][1]?.text).toEqual('1');
   });
 
+  it('component use ref as target element', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { rerender } = render(
+      <div>
+        <div ref={ref} />
+        <TestComponent />
+      </div>,
+    );
+
+    rerender(
+      <div>
+        <div ref={ref} />
+        <TestComponent dropZone={ref} dialogTrigger={ref} />
+      </div>,
+    );
+
+    expect(Widget.option.mock.calls.length).toBe(2);
+    expect(Widget.option.mock.calls[0][1]).toEqual(ref.current);
+    expect(Widget.option.mock.calls[1][1]).toEqual(ref.current);
+  });
+
   it('updates nested collection item', () => {
     const TestContainer = (props: any) => {
       const { value } = props;

packages/devextreme-react/src/core/widget-config.ts

@@ -2,6 +2,7 @@ import { ITemplateMeta } from './template';
 
 const elementPropNames = ['style', 'id'];
 const classNamePropName = 'className';
+const refPropName = ['dropZone', 'dialogTrigger'];
 
 function isIgnoredProp(name: string) {
   return name === 'children' || name === classNamePropName || elementPropNames.indexOf(name) > -1;
@@ -30,20 +31,26 @@ function separateProps(
 
   Object.keys(props).forEach((key) => {
     const defaultOptionName = defaultsProps ? defaultsProps[key] : null;
+    const value = props[key];
 
     if (isIgnoredProp(key)) { return; }
 
     if (defaultOptionName) {
-      defaults[defaultOptionName] = props[key];
+      defaults[defaultOptionName] = value;
       return;
     }
 
     if (knownTemplates[key]) {
-      templates[key] = props[key];
+      templates[key] = value;
       return;
     }
 
-    options[key] = props[key];
+    if (refPropName.includes(key)) {
+      options[key] = value && value.current ? value.current : value;
+      return;
+    }
+
+    options[key] = value;
   });
 
   return { options, defaults, templates };