diff --git a/src/app/frontend/common/components/textinput/component.ts b/src/app/frontend/common/components/textinput/component.ts
index a4bdcc6fe70f9cb352ce7f18d4cff73c97db7dfe..8bbc222b98ad7021c9546852416163bd994017cb 100644
--- a/src/app/frontend/common/components/textinput/component.ts
+++ b/src/app/frontend/common/components/textinput/component.ts
@@ -36,8 +36,8 @@ enum EditorTheme {
   styleUrls: ['./style.scss'],
 })
 export class TextInputComponent implements OnInit {
-  @Output() textChange = new EventEmitter<string | StringMap>();
-  @Input() text: string | StringMap;
+  @Output() textChange = new EventEmitter<string>();
+  @Input() text: string;
   @Input() readOnly = false;
   @Input() mode = 'yaml';
   @Input() prettify = true;
@@ -64,19 +64,14 @@ export class TextInputComponent implements OnInit {
     }
   }
 
-  onTextChange(text: string | StringMap): void {
-    this.text = String(text);
-    this.textChange.emit(this.text);
+  onTextChange(text: string): void {
+    this.textChange.emit(text);
   }
 
   private prettify_(): void {
     switch (this.mode) {
       case 'json':
-        if (typeof this.text === 'string') {
-          this.text = JSON.stringify(JSON.parse(this.text), null, '\t');
-        } else {
-          this.text = JSON.stringify(this.text, null, '\t');
-        }
+        this.text = JSON.stringify(JSON.parse(this.text), null, '\t');
         break;
       default:
         // Do nothing when mode is not recognized.
diff --git a/src/app/frontend/common/components/textinput/template.html b/src/app/frontend/common/components/textinput/template.html
index 3a0590a2f28c63ed239153166baafdfb429d885a..d5c99a4358a0c5b86d6f9bc4f596acfd01bf3ffb 100644
--- a/src/app/frontend/common/components/textinput/template.html
+++ b/src/app/frontend/common/components/textinput/template.html
@@ -21,5 +21,5 @@ limitations under the License.
             [mode]="mode"
             [theme]="theme"
             [ngClass]="{'kd-border': border}"
-            (textChange)="onTextChange($event)"
+            (textChange)="onTextChange($event.toString())"
             class="kd-ace"></ace-editor>
diff --git a/src/app/frontend/resource/config/configmap/detail/component.ts b/src/app/frontend/resource/config/configmap/detail/component.ts
index 87d99ffe98b9f45599aa4a6be90c0ebb206999eb..f612d0c8a357a823c4aa2c37be66a232f6efefee 100644
--- a/src/app/frontend/resource/config/configmap/detail/component.ts
+++ b/src/app/frontend/resource/config/configmap/detail/component.ts
@@ -57,4 +57,12 @@ export class ConfigMapDetailComponent implements OnInit, OnDestroy {
     this.configMapSubscription_.unsubscribe();
     this.actionbar_.onDetailsLeave.emit();
   }
+
+  getConfigMapData(cm: ConfigMapDetail): string {
+    if (!cm) {
+      return '';
+    }
+
+    return JSON.stringify(cm.data);
+  }
 }
diff --git a/src/app/frontend/resource/config/configmap/detail/template.html b/src/app/frontend/resource/config/configmap/detail/template.html
index b95ef1f07f3ed2355a65a2c378a5bebb04564dd9..462ee13e98171ded7a36d9ff8cd18318c51d8c1a 100644
--- a/src/app/frontend/resource/config/configmap/detail/template.html
+++ b/src/app/frontend/resource/config/configmap/detail/template.html
@@ -23,7 +23,7 @@ limitations under the License.
        i18n>Data</div>
   <div content>
     <kd-text-input *ngIf="configMap?.data"
-                   [text]="configMap?.data"
+                   [text]="getConfigMapData(configMap)"
                    [readOnly]="true"
                    [border]="false"
                    mode="json"></kd-text-input>