How to make TextArea component display with line breaks?

[thomaskennedy]

I'm providing a TextArea so users can add multiple values at once to a text list that will be captured elsewhere. The usual use case is that the user adds one value at a time, but once in a while they will add several values at once, generally copied in like this:

A234345

B-3425

HK3-208

I want the TextArea to display the pasted-in values just like that, separated by newlines. The reason is simple: I will apply some input validation, mainly testing for length, and I will call out bad values. It will be easier for the user to spot and fix the bad ones if they shown as separate lines. I was trying to add  white-space: pre-wrap; to its styles. But this seems to be ignored, and the values are rearranged as comma-delimited instead. Is there a way to get them to appear separated by newlines?

[Ankur Bawiskar]

@thomaskennedy 

it won't work that way for text area. Did you try to use Multi-line text area input?

So it's not possible for single line text area.

If my response helped please mark it correct and close the thread so that it benefits future readers.

[thomaskennedy]

Ankur,

I should be clear that I'm using a TextArea in UI Builder, so this is not Platform UI. Here's what I did, and this seems to work OK:

Summary: I added a copy of the user's values to my state variable, as a String, delimited by newlines. This is the value the TextArea is bound to.

When the user types or pastes in the field, and the new value is not empty, I capture it in an object something like this:

item_new = {
   "raw_values": [],         // values as typed/pasted by the user, split into array, trimmed, deduped
   "raw_values_display": "", // values as typed/pasted by the user, after removing dupes, delimited by newline
   "raw_values_invalid_count": 0,
   "new_values": [],         // valid values not matching an existing ignore part id
    "messages":[] // validation-related messages for the user
};

The raw_values_display is a slightly cleaned-up copy of the value(s) the user types in the field, trimmed and deduped.

// to get raw values, split on various delimiters, remove empties and duplicates
var ref = [];
item_new.raw_values = event.payload.fieldValue
    .trim()
    .split(/[\s,]+/)
    .map(function(e) {
        return e.trim();
     })
     .filter(function(e) { return e.length > 0; }) // trim
     .filter(function(e) { // dedupe
         if(ref.indexOf(e.toLowerCase())  == -1) {
             ref.push(e.toLowerCase());
             return true;
          } else {
             return false;
          }
});
item_new.raw_values_display = item_new.raw_values.join("\n");

The TextArea is bound to this "raw_values_display" property.

The effect is that when the user pastes in values, the duplicates are removed, but invalid values (usually, "too short") are not. The Add button is disabled because the client state where all this is captured indicates there is a bad value.

In rare cases the values actually do contain a space, so I will think over how to handle that.

[sunil maddheshi]

@thomaskennedy 

Please use Multi Line Text type field, below is the screenshots

Please mark correct/helpful if this help you!