Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Adjust prompt input height when minRows changes #3166

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

phuctm97
Copy link

@phuctm97 phuctm97 commented Jan 3, 2025

Description

This PR fixes a bug that when minRows of PromptInput changes, it won't have effect until either maxRows or value changes. Changing minRows should also adjust height.

Related links, issue #, if available: n/a

How has this been tested?

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@phuctm97 phuctm97 requested a review from a team as a code owner January 3, 2025 09:20
@phuctm97 phuctm97 requested review from orangevolon and removed request for a team January 3, 2025 09:20
@@ -111,7 +111,7 @@ const InternalPromptInput = React.forwardRef(
const minTextareaHeight = `calc(${LINE_HEIGHT} + ${tokens.spaceScaledXxs} * 2)`; // the min height of Textarea with 1 row
textareaRef.current.style.height = `min(max(${scrollHeight}, ${minTextareaHeight}), ${maxRowsHeight})`;
}
}, [maxRows, LINE_HEIGHT, PADDING]);
}, [minRows, maxRows, LINE_HEIGHT, PADDING]);
Copy link
Contributor

Choose a reason for hiding this comment

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

Since adjustTextarea callback doesn't use minRows, adding it as its dependency would be confusing.

For the same reason you should get a linter error like this:

image

We can either mute this eslint error and include a comment that clearly explains how changing the minRows affects the rows attribute on the underlying <textarea /> element which ultimately changes the scrollHeight

or simply move the minRows the the dependency array of useEffect at line 130:

useEffect(() => {
  adjustTextareaHeight();
}, [value, adjustTextareaHeight, maxRows, minRows, isCompactMode]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants