Fix useDynamicTextareaHeight not taking into account padding
#2848
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 83a1df5 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
iansan5653
temporarily deployed
to
github-pages
GitHub Actions
Inactive
joshblack
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The
useDynamicTextareaHeightuses a utility function that calculates the number of pixels from the top edge of the component to the bottom of a given character. We then use that number of pixels to set the height of atextareaso that the height of thetextareaalways fits the text inside of it.However, the utility function includes the top padding in that height. But when we set
heighton the underlying element, we don't want to include the top padding because whenbox-sizingiscontent-box, theheightof an element is it's interior height - the height not including any padding or borders.When I wrote the hook I intended to include a workaround for this by setting the padding to zero, calculating the height, and then resetting the padding back to what it was. But somehow the lines got switched up and I was performing the steps in the wrong order, causing the workaround to have no effect. The result of this was that
MarkdownEditoralways had slightly too much space below the bottom line of text.This PR fixes the order of the steps, and also changes the hook to accept a
refinstead of an element instance. This is technically a breaking change but we don't need a major bump because this is a draft hook and is not used anywhere ingithub/github.Screenshots
Before
Notice how the input expands before it needs to:
Screen.Recording.2023-01-31.at.4.16.35.PM.mov
After
Now the input fits more tightly to the text:
Screen.Recording.2023-01-31.at.4.16.54.PM.mov