better placeholders

Author: gerhean

src/components/incubator/EditingOverviewCard.tsx

@@ -59,10 +59,12 @@ export class EditingOverviewCard extends React.Component<Props, IState> {
   };
 
   private toggleEditField = (field: keyof IAssessmentOverview) => (e: any) => {
-    this.setState({
-      editingOverviewField: field,
-      fieldValue: this.props.overview[field]
-    });
+    if (this.state.editingOverviewField !== field) {
+      this.setState({
+        editingOverviewField: field,
+        fieldValue: this.props.overview[field]
+      });
+    }
   };
 
   private handleExportXml = () => (e: any) => {
@@ -161,7 +163,7 @@ export class EditingOverviewCard extends React.Component<Props, IState> {
 }
 
 const createPlaceholder = (str: string): string => {
-  if (str.match('^\n*$')) {
+  if (str.match('^(\n| )*$')) {
     return 'Enter Value Here.';
   } else {
     return str;

src/components/incubator/editingWorkspaceSideContent/TextareaContent.tsx

@@ -40,10 +40,11 @@ export class TextareaContent extends React.Component<IProps, IState> {
     if (this.state.isEditing) {
       display = <div onClick={this.toggleEditField()}>{this.makeEditingTextarea()}</div>;
     } else {
-      const value = getValueFromPath(this.props.path, this.props.assessment);
+      let value = getValueFromPath(this.props.path, this.props.assessment) || filler;
+      value = value.match('^(\n| )*$') ? filler : value;
       display = (
         <div onClick={this.toggleEditField()}>
-          {this.state.useRawValue ? value : <Markdown content={value || filler} />}
+          {this.state.useRawValue ? value : <Markdown content={value} />}
         </div>
       );
     }
@@ -95,11 +96,13 @@ export class TextareaContent extends React.Component<IProps, IState> {
   );
 
   private toggleEditField = () => (e: any) => {
-    const fieldVal = getValueFromPath(this.props.path, this.props.assessment) || '';
-    this.setState({
-      isEditing: true,
-      fieldValue: typeof fieldVal === 'string' ? fieldVal : fieldVal.toString()
-    });
+    if (!this.state.isEditing) {
+      const fieldVal = getValueFromPath(this.props.path, this.props.assessment) || '';
+      this.setState({
+        isEditing: true,
+        fieldValue: typeof fieldVal === 'string' ? fieldVal : fieldVal.toString()
+      });
+    }
   };
 }