From 2830dee5f6859429d09af877c28a17867bfd1b06 Mon Sep 17 00:00:00 2001
From: Sipke Schoorstra <sipkeschoorstra@outlook.com>
Date: Mon, 17 May 2021 13:45:24 +0200
Subject: [PATCH] Fix initial value bug with multi-line input component

Fixes #995
---
 .../elsa-multi-line-property.tsx                     | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-multi-line-property/elsa-multi-line-property.tsx b/src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-multi-line-property/elsa-multi-line-property.tsx
index c30606860..d6e3ebe78 100644
--- a/src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-multi-line-property/elsa-multi-line-property.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-multi-line-property/elsa-multi-line-property.tsx
@@ -1,5 +1,5 @@
 import {Component, h, Prop, State} from '@stencil/core';
-import {ActivityDefinitionProperty, ActivityPropertyDescriptor} from "../../../../models";
+import {ActivityDefinitionProperty, ActivityPropertyDescriptor, SyntaxNames} from "../../../../models";
 
 @Component({
   tag: 'elsa-multi-line-property',
@@ -11,6 +11,11 @@ export class ElsaMultiLineProperty {
   @Prop() propertyModel: ActivityDefinitionProperty;
   @State() currentValue: string;
 
+  componentWillLoad() {
+    const defaultSyntax = this.propertyDescriptor.defaultSyntax || SyntaxNames.Literal;
+    this.currentValue = this.propertyModel.expressions[defaultSyntax] || '';
+  }
+
   getEditorHeight(options: any) {
     const editorHeightName = options.editorHeight || 'Default';
 
@@ -24,7 +29,7 @@ export class ElsaMultiLineProperty {
   }
 
   onChange(e: Event) {
-    const input = e.currentTarget as HTMLInputElement;
+    const input = e.currentTarget as HTMLTextAreaElement;
     this.propertyModel.expressions['Literal'] = this.currentValue = input.value;
   }
 
@@ -54,7 +59,8 @@ export class ElsaMultiLineProperty {
                             onDefaultSyntaxValueChanged={e => this.onDefaultSyntaxValueChanged(e)}
                             editor-height={editorHeight.propertyEditor}
                             context={context}>
-        <textarea id={fieldId} name={fieldName} value={value} onChange={e => this.onChange(e)} class="focus:elsa-ring-blue-500 focus:elsa-border-blue-500 elsa-block elsa-w-full elsa-min-w-0 elsa-rounded-md sm:elsa-text-sm elsa-border-gray-300" rows={editorHeight.textArea}/>
+        <textarea id={fieldId} name={fieldName} value={value} onChange={e => this.onChange(e)}
+                  class="focus:elsa-ring-blue-500 focus:elsa-border-blue-500 elsa-block elsa-w-full elsa-min-w-0 elsa-rounded-md sm:elsa-text-sm elsa-border-gray-300" rows={editorHeight.textArea}/>
       </elsa-property-editor>
     );
   }