JSON Schema Forms can't handle new-lines in textarea ui:widget's

App Building
1

Take the following schema.

JSONSchema:
{
"type": "object",
"properties": {
"multi_line_paragraph": {
"type": "string",
"title": "Title"
}
}
}

UISchema:
{
"multi_line_paragraph": {
"ui:widget": "textarea"
}
}

Using "ui:widget": "textarea" allows the user to type multi-line responses in the text box.
However, the value of {{jsonSchemaForm1.data}} will replace new lines with a space. This makes "textarea" visually different than "text", but functionally identical.

It seems like this behavior is shared with Retool's "Text Area" component.
See: Preserving newlines from text area input

Unfortunately, the workaround of using a "Rich Text Editor" component doesn't work since
JSON Schema Form cannot be configured to use this component with "ui:widget".

The "normal" react-jsonschema-form behavior can be seen here:
https://rjsf-team.github.io/react-jsonschema-form/
Simply type in the "Bio" text box and notice how the "bio" formData can correctly contain a \n character.

2

Looking into this further, it's only Retool's preview of the values in the "State" tab, "JSON Explorer" UI component, and white tool-tips that strip these new-lines.

The new-line characters are stored correctly in our database.

New-lines are shown correctly in green mouse-over-tooltips, query result preview, and when used as "Default Form Data" of a JSON Schema Form.

It seems like this is only an inconsistency in how Retool displays text, not a limitation of JSON Schema form.

1 Like
3

Thanks so much for all of these details, @prepka! It looks like we're working on a fix for this. I'll post here when I have an update