client webpart multiline displays as one line only

Question

I am trying to create a multiple line webpart property using this code: PropertyPaneTextField('test', { label: 'Multi-line Text Field', multiline: true }),

As described in the docs, however, when i type multiple lines in the field, they're just displayed as one line only in the UI. Is there a way to let the user type what they want, and the result is displayed as is in the UI?

Answer 1

You can try escaping the property value and then replacing %0A with <br/>. Like this
let propVal:string = escape(this.properties.test).replace(/%0A/g,"<br/>")

Answer 2

when you use multiline: true property, it enables you to enter the number of rows you want to display via the property rows?: number. This will help you display text field as text area.

PropertyPaneTextField('test', {
                  label: 'Multi-line Text Field',
                  multiline: true,
                  rows: 5
                }),