Fix TextField for coral-ui and setting configure stream, question box.

client/coral-configure/components/ConfigureCommentStream.js

@@ -7,7 +7,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
 const lang = new I18n(translations);
 
-export default ({handleChange, handleApply, changed, ...props}) => (
+export default ({handleChange, handleApply, changed, updateQuestionBoxContent, ...props}) => (
   <form onSubmit={handleApply}>
     <div className={styles.wrapper}>
       <div className={styles.container}>
@@ -48,10 +48,12 @@ export default ({handleChange, handleApply, changed, ...props}) => (
 
           <div className={`${styles.configSettingQuestionBox} ${props.questionBoxEnable ? null : styles.hidden}`} >
             <TextField
+              id="qboxcontent"
               className={`${styles.configSettingQuestionBoxInfo}`}
-              onChange={handleChange}
+              onChange={updateQuestionBoxContent}
               rows={3}
-              questionBoxContent={props.questionBoxContent}
+              value={props.questionBoxContent}
+              label={lang.t('configureCommentStream.includeQuestionHere')}
             />
           </div>
         </li>

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -21,6 +21,7 @@ class ConfigureStreamContainer extends Component {
     this.toggleStatus = this.toggleStatus.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleApply = this.handleApply.bind(this);
+    this.updateQuestionBoxContent = this.updateQuestionBoxContent.bind(this);
   }
 
   handleApply (e) {
@@ -58,6 +59,11 @@ class ConfigureStreamContainer extends Component {
     });
   }
 
+  updateQuestionBoxContent(e) {
+    this.props.asset.settings.questionBoxContent = e.target.value;
+    this.handleChange(e);
+  }
+
   toggleStatus () {
     this.props.updateStatus(
       this.props.asset.closedAt === null ? 'closed' : 'open'
@@ -84,6 +90,7 @@ class ConfigureStreamContainer extends Component {
           changed={this.state.changed}
           premodLinks={false}
           premod={premod}
+          updateQuestionBoxContent={this.updateQuestionBoxContent}
           questionBoxEnable={questionBoxEnable}
           questionBoxContent={questionBoxContent}
         />

client/coral-ui/components/TextField.js

@@ -4,17 +4,15 @@ import 'material-design-lite';
 
 export default class TextField extends Component {
   render() {
-    const {className, onChange, rows, questionBoxContent} = this.props;
+    const {id, className, onChange, label, rows, value} = this.props;
     return (
       <TextFieldMDL
+        id={id}
         className={className}
         onChange={onChange}
-        label=""
+        label={label}
         rows={rows}
-        id="qboxcontent"
-        value={questionBoxContent}
-        expandable={false}
-        style={{width: '100%'}}
+        value={value}
       />
     );
   }