Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(textfield): textarea actually grows with multiline #4271

Merged
merged 22 commits into from
Apr 25, 2024

Conversation

blunteshwar
Copy link
Collaborator

Description

sp-textarea was not growing when typing multiple lines of text, so I updated theheight of textarea with scrollHeight

Related issue(s)

#4259

Motivation and context

It updates the height of textarea with attributes {multiline,grows} when typing multiple lines of text.

How has this been tested?

  • Test case 1
    1. Go here
    2. Remove any text from the middle of the textarea
    3. Start adding text and press Enter
    4. Check the textarea doesn't grow

Screenshots (if appropriate)

Screen.Recording.2024-04-16.at.5.42.01.PM.mov

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

@blunteshwar blunteshwar linked an issue Apr 16, 2024 that may be closed by this pull request
1 task
@blunteshwar blunteshwar requested a review from Rajdeepc April 16, 2024 12:14
Copy link

github-actions bot commented Apr 16, 2024

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.93 0.97 0.97
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category Latest Main Branch
Total 229.305 kB 216.974 kB 216.673 kB 🏆
Scripts 61.021 kB 54.238 kB 53.882 kB 🏆
Stylesheet 35.616 kB 30.77 kB 🏆 30.83 kB
Document 5.956 kB 5.254 kB 5.249 kB 🏆
Third Party 126.712 kB 126.712 kB 126.712 kB

Request Count

Category Latest Main Branch
Total 43 43 43
Scripts 35 35 35
Stylesheet 5 5 5
Document 1 1 1
Third Party 2 2 2

@blunteshwar blunteshwar marked this pull request as ready for review April 16, 2024 12:18
Copy link

github-actions bot commented Apr 16, 2024

Tachometer results

Chrome

color-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 487 kB 38.56ms - 39.93ms - unsure 🔍
-3% - +2%
-1.34ms - +0.77ms
branch 476 kB 38.73ms - 40.34ms unsure 🔍
-2% - +3%
-0.77ms - +1.34ms
-

combobox permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 706 kB 35.23ms - 35.75ms - unsure 🔍
-1% - +1%
-0.25ms - +0.47ms
branch 697 kB 35.14ms - 35.63ms unsure 🔍
-1% - +1%
-0.47ms - +0.25ms
-

light-dom-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 706 kB 368.93ms - 375.31ms - unsure 🔍
-1% - +1%
-4.03ms - +5.27ms
branch 698 kB 368.11ms - 374.87ms unsure 🔍
-1% - +1%
-5.27ms - +4.03ms
-

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 521 kB 64.36ms - 66.19ms - unsure 🔍
-2% - +1%
-1.64ms - +0.83ms
branch 513 kB 64.85ms - 66.51ms unsure 🔍
-1% - +3%
-0.83ms - +1.64ms
-

search permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 471 kB 37.23ms - 38.08ms - unsure 🔍
-1% - +2%
-0.19ms - +0.92ms
branch 462 kB 36.94ms - 37.64ms unsure 🔍
-2% - +1%
-0.92ms - +0.19ms
-

slider permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 478 kB 72.97ms - 75.34ms - unsure 🔍
-3% - +1%
-2.36ms - +0.55ms
branch 470 kB 74.22ms - 75.90ms unsure 🔍
-1% - +3%
-0.55ms - +2.36ms
-

textfield permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 432 kB 23.13ms - 23.78ms - unsure 🔍
-3% - +1%
-0.65ms - +0.27ms
branch 423 kB 23.32ms - 23.97ms unsure 🔍
-1% - +3%
-0.27ms - +0.65ms
-
Firefox

color-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 495 kB 77.07ms - 81.69ms - unsure 🔍
-1% - +6%
-0.67ms - +4.43ms
branch 484 kB 76.43ms - 78.57ms unsure 🔍
-6% - +1%
-4.43ms - +0.67ms
-

combobox permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 706 kB 64.30ms - 71.34ms - slower ❌
4% - 15%
2.23ms - 9.49ms
branch 697 kB 61.09ms - 62.83ms faster ✔
4% - 14%
2.23ms - 9.49ms
-

light-dom-test permalink

Version Bytes Avg Time vs remote vs branch
npm latest 706 kB 734.03ms - 749.61ms - slower ❌
3% - 6%
19.09ms - 42.47ms
branch 698 kB 702.32ms - 719.76ms faster ✔
3% - 6%
19.09ms - 42.47ms
-

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 521 kB 147.80ms - 156.08ms - unsure 🔍
-4% - +3%
-6.20ms - +5.24ms
branch 513 kB 148.47ms - 156.37ms unsure 🔍
-3% - +4%
-5.24ms - +6.20ms
-

search permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 471 kB 72.81ms - 77.51ms - unsure 🔍
-5% - +5%
-4.12ms - +3.96ms
branch 462 kB 71.95ms - 78.53ms unsure 🔍
-5% - +5%
-3.96ms - +4.12ms
-

slider permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 478 kB 164.16ms - 170.64ms - unsure 🔍
-2% - +3%
-3.94ms - +4.82ms
branch 470 kB 164.02ms - 169.90ms unsure 🔍
-3% - +2%
-4.82ms - +3.94ms
-

textfield permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 432 kB 47.48ms - 50.68ms - unsure 🔍
-5% - +4%
-2.33ms - +1.89ms
branch 423 kB 47.92ms - 50.68ms unsure 🔍
-4% - +5%
-1.89ms - +2.33ms
-

@blunteshwar blunteshwar requested a review from Westbrook April 22, 2024 15:25
@blunteshwar blunteshwar requested a review from Westbrook April 24, 2024 13:54
@Westbrook
Copy link
Contributor

Currently ends up with textarea always one line longer than the actual text:
image

@Rajdeepc
Copy link
Contributor

Rajdeepc commented Apr 24, 2024

@blunteshwar lets try to add a re-review request after a full VRT test pass going forward to save time of the review process?

@blunteshwar
Copy link
Collaborator Author

@blunteshwar lets try to add a re-review request after a full VRT test pass going forward to save time of the review process?

Sure! Will keep in mind from next time

packages/textfield/test/textfield.test.ts Outdated Show resolved Hide resolved
packages/textfield/src/textfield.css Outdated Show resolved Hide resolved
packages/textfield/src/Textfield.ts Show resolved Hide resolved
blunteshwar and others added 3 commits April 25, 2024 21:53
@blunteshwar blunteshwar requested a review from Westbrook April 25, 2024 16:36
Copy link
Contributor

@Westbrook Westbrook left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! :shipit:

@Westbrook Westbrook merged commit d8d0e84 into main Apr 25, 2024
49 checks passed
@Westbrook Westbrook deleted the blunteshwar/sp-textarea-bug branch April 25, 2024 17:09
Rajdeepc pushed a commit that referenced this pull request Apr 26, 2024
* fix(textfield): textarea actually grows with multiline

* chore(textfield): added a test

* chore(textfield): css changes

* chore(textfield): added changes to css

* Update textfield.test.ts

* chore(textfield): reverting css changes as they didn't work

* fix(textfield): added css fix

* fix(textfield): fixed the extra spacing in render method

* fix(textfield): fixed spacing

* fix(textfield): fixed spacing

* fix(textfield): fixed spacing

* fix(textfield): fix spacing

* fix(textfield): fixed spacing

* fix(textfield): fixed spacing inside render method

* chore(textfield): suggested changes

Co-authored-by: Westbrook Johnson <wesjohns@adobe.com>

* chore(textfield): removed unrequired css props

---------

Co-authored-by: Westbrook Johnson <wesjohns@adobe.com>
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: sp-textarea doesn't grow typing in multiple lines of text
3 participants