Skip to content

Resolve "Add a multiline option to the input text element"

Afonso Silva requested to merge 2155-add-a-textarea-element into develop

What is in this MR

Add new multiline and rows properties to InputTextElement. That last one is a positive integer field that defaults to 1. If multiline is specified, the rendered component will use a textarea, otherwise it renders a input.

Gravação_do_ecrã_2024-01-09__às_10.54.52

Once published its content makes the container grow:

2

It also provides validation to ensure that the number of rows is always positive:

image

Notes

  1. If we remove the number from the sidebar an empty rows property is sent to the API, which generates an ERROR_REQUEST_BODY_VALIDATION. Fixed by using vuelidate.

  2. The previous input tag has @input="setFormData($event.target.value)". I couldn't make it work for the textarea as it was raising some errors, not sure if this is 100% required?. Fixed.

  3. This MR defines a custom method updateTextareaHeight for automatically growing and shrinking the textarea according to its contents. I could have reused the FormulaInputField as it also behaves similarly. However I opted not to, because this is not related to formulas and felt it was an unnecessary dependency. Let me know if you'd prefer otherwise.

How to test this MR

  • Add a new Text Input element
  • Set any number of rows in the right sidebar. Try setting "incorrect" amounts, like 0, -1, etc.
  • The preview of the element should grow and shrink accordingly to the number of rows
  • Publish or preview the app, and add multiple lines to the input

Merge Request Checklist

  • changelog.md has been updated if required.
  • New/updated Premium/Enterprise features are separated correctly in the premium or enterprise folder
  • The latest Chrome and Firefox have been used to test any new frontend features
  • Documentation has been updated
  • Quality Standards are met
  • Performance: tables are still fast with 100k+ rows, 100+ field tables
  • The redoc API pages have been updated for any REST API changes
  • Our custom API docs are updated for changes to endpoints accessed via api tokens
  • The UI/UX has been updated following UI Style Guide

Closes #2155 (closed)

Edited by Afonso Silva

Merge request reports