Merge 125f0586b7 into f5843fe588

superset-frontend/src/explore/components/controls/TextAreaControl.jsx

@@ -18,6 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { omit } from 'lodash';
 import { TextArea } from 'src/components/Input';
 import { t, withTheme } from '@superset-ui/core';
 
@@ -70,16 +71,38 @@ const defaultProps = {
 };
 
 class TextAreaControl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.initialValue = props.initialValue;
+
+    this.state = {
+      value: this.initialValue,
+    };
+  }
+
   onControlChange(event) {
     const { value } = event.target;
+    this.setState({ value });
     this.props.onChange(value);
   }
 
   onAreaEditorChange(value) {
+    this.setState({ value });
     this.props.onChange(value);
   }
 
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (this.initialValue !== nextProps.value) {
+      this.initialValue = nextProps.value;
+      this.setState({
+        value: nextProps.value,
+      });
+    }
+  }
+
   renderEditor(inModal = false) {
+    const { value } = this.state;
+
     const minLines = inModal ? 40 : this.props.minLines || 12;
     if (this.props.language) {
       const style = {
@@ -103,6 +126,7 @@ class TextAreaControl extends React.Component {
           maxLines={inModal ? 1000 : this.props.maxLines}
           editorProps={{ $blockScrolling: true }}
           defaultValue={this.props.initialValue}
+          value={value}
           readOnly={this.props.readOnly}
           key={this.props.name}
           {...this.props}
@@ -110,13 +134,28 @@ class TextAreaControl extends React.Component {
         />
       );
     }
+
+    const textAreaProps = omit(this.props, [
+      'name',
+      'initialValue',
+      'height',
+      'minLines',
+      'maxLines',
+      'offerEditInModal',
+      'language',
+      'aboveEditorSection',
+      'readOnly',
+    ]);
+
     return (
       <TextArea
         placeholder={t('textarea')}
-        onChange={this.onControlChange.bind(this)}
         defaultValue={this.props.initialValue}
+        value={value}
         disabled={this.props.readOnly}
         style={{ height: this.props.height }}
+        {...textAreaProps}
+        onChange={this.onControlChange.bind(this)}
       />
     );
   }

superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx

@@ -19,6 +19,7 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
 import sinon from 'sinon';
+import { render, screen } from 'spec/helpers/testing-library';
 import { styledMount as mount } from 'spec/helpers/theming';
 import { TextAreaEditor } from 'src/components/AsyncAceEditor';
 import { TextArea } from 'src/components/Input';
@@ -62,4 +63,11 @@ describe('TextArea', () => {
     wrapper.simulate('change', { target: { value: 'x' } });
     expect(defaultProps.onChange.calledWith('x')).toBe(true);
   });
+
+  it('TextArea renders props.value', async () => {
+    const props = { ...defaultProps };
+    props.value = 'Sample value';
+    render(<TextAreaControl {...props} />);
+    expect(screen.getByDisplayValue('Sample value')).toBeInTheDocument();
+  });
 });

superset-frontend/src/explore/components/controls/TextControl/index.tsx

@@ -94,12 +94,21 @@ export default class TextControl<
     });
   };
 
-  render() {
-    let { value } = this.state;
-    if (this.initialValue !== this.props.value) {
-      this.initialValue = this.props.value;
-      value = safeStringify(this.props.value);
+  UNSAFE_componentWillReceiveProps(nextProps: TextControlProps<T>) {
+    if (this.initialValue !== nextProps.value) {
+      this.initialValue = nextProps.value;
+      this.setState({
+        value: safeStringify(nextProps.value),
+      });
     }
+  }
+
+  render() {
+    const { value } = this.state;
+    // if (this.initialValue !== this.props.value) {
+    //   this.initialValue = this.props.value;
+    //   value = safeStringify(this.props.value);
+    // }
     return (
       <div>
         <ControlHeader {...this.props} />