Resolve "Add a multiline option to the input text element"
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:
It also provides validation to ensure that the number of rows is always positive:
Notes
-
If we remove the number from the sidebar an empty. Fixed by usingrows
property is sent to the API, which generates anERROR_REQUEST_BODY_VALIDATION
vuelidate
. -
The previous input tag has. Fixed.@input="setFormData($event.target.value)"
. I couldn't make it work for thetextarea
as it was raising some errors, not sure if this is 100% required? -
This MR defines a custom method
updateTextareaHeight
for automatically growing and shrinking thetextarea
according to its contents. I could have reused theFormulaInputField
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)