feat: multi-line input and auto-resize textarea

[ankurrsinghal]

Description

Features:-

1. Created a new AutoResizeTextArea component in the editorComponents. Textarea does not increase its height on adding text, but it increases its scroll height. To accommodate Auto Height with the textarea/Multi-line InputWidget, I have created a new TextArea component which changes its height when its content changes based on its scrollHeight. This is done by creating another hidden similar proxy Textarea with contents equal to the widget's value, and whenever this value changes we run a layout effect that sets the main text area height equal to the scrollHeight of the proxy textarea.

2. Added a new configuration Multi-line for InputWidget in the Data-Type which will decide whether to replace the input element with textarea. Currently, the way to decide whether we should display a textarea or not is based on whether widget's height is greater than 8 rows or not. To fix it, I added a proper configuration which will user to select whether he/she wants a Single-line input or Multi-line textarea.

3. Replaced the label of Text configuration to Single-line which remains a simple input element as before. Changed the label of the Text configuration to Single-line in contrast with Multi-line.

4. Migration Added migration number 74 for the InputWidgetsV2. Used the same previous logic to detect whether the input type should be multiple-line or not and set the inputType to MULTI_LINE_TEXT if it's true.

5. Changed a lot of CSS styling in Input components (Currency and Phone too) so that they look similar to other components like DatePicker and Select. Currently the input component take containers height which is different from other components.

6. The onSubmit behaviour of the Multi-line input has also changed. Now the line-break will happen on Enter and submit will be triggered on Cmd + Enter.

Fixes # (issue)

if no issue exists, please create an issue and ask the maintainers about this first

Media

A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video

Type of change

• New feature (non-breaking change which adds functionality)

How Has This Been Tested?

• Manual
• Jest

Test Plan

Add Testsmith test cases links that relate to this PR

Issues raised during DP testing

Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR)

Checklist:

Dev activity

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [x] I have added tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes
• [ ] PR is being merged under a feature flag

QA activity:

• [ ] Test plan has been approved by relevant developers
• [ ] Test plan has been peer reviewed by QA
• [ ] Cypress test cases have been added and approved by either SDET or manual QA
• [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA
• [ ] Added Test Plan Approved label after reveiwing all Cypress test

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
appsmith	✅ Ready (Inspect)	Visit Preview	Jan 17, 2023 at 11:28AM (UTC)

[SatishGandham]

/perf-test Just testing perf infra

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3763298809. Workflow: Performance Tests Workflow. Commit: ``. PR: 19141. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19141&runId=3763298809_1

[SatishGandham]

/perf-test Testing performance infra, ignore.

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3764081156. Workflow: Performance Tests Workflow. Commit: ``. PR: 19141. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19141&runId=3764081156_1

[SatishGandham]

/perf-test Testing performance infra, ignore.

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3764334508. Workflow: Performance Tests Workflow. Commit: ``. PR: 19141. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19141&runId=3764334508_1

[riodeuno]

@ankurrsinghal As there are pending tasks in the PR description. I'm going to convert this to draft.

[ankurrsinghal]

/ok-to-test sha=a2c8c6c

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3787863968. Workflow: Appsmith External Integration Test Workflow. Commit: a2c8c6c. PR: 19141. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19141&runId=3787863968_1

[github-actions[bot]]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/Application/CurrencyInputIssue_Spec.js cypress/integration/Smoke_TestSuite/Application/EchoApiCMS_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/InputWidgets_NavigateTo_validation_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/DatasourceSchema_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/JSEditorIndent_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Chart/Custom_Chart_Data_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/CurrencyInput/CurrencyInputDynamicCurrencyCode_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Form/FormWidget_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Input_MaxChar_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Input_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Inputv2_inside_List_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Inputv2_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/JSONForm/JSONForm_ArrayField_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/List/List7_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/PhoneInput/PhoneInputDynamicValue_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/Add_new_row_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/Inline_editing_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/inline_editing_validations_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/SMTPDatasource_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/MySQL2_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/Postgres2_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/Postgres_DataTypes/Json_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/S3_1_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/S3_2_spec.js

[github-actions[bot]]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/Application/CurrencyInputIssue_Spec.js cypress/integration/Smoke_TestSuite/Application/EchoApiCMS_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/InputWidgets_NavigateTo_validation_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/JSEditorIndent_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Chart/Custom_Chart_Data_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/CurrencyInput/CurrencyInputDynamicCurrencyCode_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Form/FormWidget_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Input_MaxChar_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Input_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Inputv2_inside_List_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Inputv2_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/JSONForm/JSONForm_ArrayField_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/List/List7_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/PhoneInput/PhoneInputDynamicValue_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/Add_new_row_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/Inline_editing_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/inline_editing_validations_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/Datasources/SMTPDatasource_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/MySQL2_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/Postgres2_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/Postgres_DataTypes/Json_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/Postgres_DataTypes/Json_Spec.ts cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/S3_1_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/S3_2_spec.js

[ankurrsinghal]

/ok-to-test sha=5190a9c

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3799534039. Workflow: Appsmith External Integration Test Workflow. Commit: 5190a9c. PR: 19141. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19141&runId=3799534039_1

[ankurrsinghal]

@Sripriya93 @kamakshibhat-appsmith there are now changes releated to the alignment of the input field and the label also, which makes them similar to Datepicker widget and other select widgets.

[github-actions[bot]]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/Application/EchoApiCMS_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/IDE/MaintainContext&Focus_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Templates/Fork_Template_Existing_app_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Input_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/Input/Inputv2_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/QueryPane/S3_1_spec.js

[ankurrsinghal]

/ok-to-test sha=37e6af5

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3800320040. Workflow: Appsmith External Integration Test Workflow. Commit: 37e6af5. PR: 19141. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19141&runId=3800320040_1

[github-actions[bot]]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/Application/EchoApiCMS_spec.js

[Sripriya93]

Moving to reopen as we are facing the below issue

https://images.zenhubusercontent.com/275993885/e1c163b3-5aef-48ae-98c2-49465ba503e4/untitled_application_1___editor___appsmith___30_december_2022__1_.mp4

[ankurrsinghal]

/ok-to-test sha=64c30b9

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3845325048. Workflow: Appsmith External Integration Test Workflow. Commit: 64c30b9. PR: 19141. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19141&runId=3845325048_1

[kamakshibhat-appsmith]

Migration is failing, pls check @ankurrsinghal cc : @Sripriya93

[ankurrsinghal]

/ok-to-test sha=d43410a

[github-actions[bot]]

Tests running at: https://github.com/appsmithorg/appsmith/actions/runs/3847092663. Workflow: Appsmith External Integration Test Workflow. Commit: d43410a. PR: 19141. Perf tests will be available at https://app.appsmith.com/app/performance-infra-dashboard/pr-details-638dd7cd2913ba43778b915e?pr=19141&runId=3847092663_1

[github-actions[bot]]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/Application/EchoApiCMS_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitImport/ImportEmptyRepo_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Connection_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Deploy_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/DisconnectGit_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/GitBugs_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Merge_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/RegenerateSSHKey_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/RepoLimitExceededErrorModal_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitWithTheming/GitWithTheming_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/JSEditorIndent_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js cypress/integration/Smoke_TestSuite/ServerSideTests/GenerateCRUD/Postgres2_Spec.ts

[kamakshibhat-appsmith]

Migration is working @ankurrsinghal

[github-actions[bot]]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/Application/EchoApiCMS_spec.js cypress/integration/Smoke_TestSuite/Application/EchoApiCMS_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitImport/ImportEmptyRepo_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Deploy_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Merge_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/RegenerateSSHKey_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/RepoLimitExceededErrorModal_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitWithTheming/GitWithTheming_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js

[kamakshibhat-appsmith]

few Questions:

1. The size of the input box is slightly increased and there is a scroll introduced inside the input box as soon as data type is changed to multi-line with fixed mode. This also makes the the input text inside the input box look misaligned because the text doesn't seem start from the top (there seems to be extra padding from the top than usual ) LOOM
2. with data-type muti-line text and autoheight enabled, the default rows gets increased for the input type . is this expected? LOOM @ankurrsinghal

[github-actions[bot]]

The following are new failures, please fix them before merging the PR cypress/integration/Smoke_TestSuite/Application/EchoApiCMS_spec.js cypress/integration/Smoke_TestSuite/Application/EchoApiCMS_spec.js cypress/integration/Smoke_TestSuite/Application/EchoApiCMS_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/BugTests/Autocomplete_JS_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitImport/ImportEmptyRepo_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/Deploy_spec.ts cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/RegenerateSSHKey_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitSync/RepoLimitExceededErrorModal_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/Git/GitWithTheming/GitWithTheming_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/DatasourcePageLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/JSEditorIndent_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/WidgetsLayout_spec.js