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

fix(ui-text-area): make focus line follow resized textarea #1794

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

Conversation

joyenjoyer
Copy link
Contributor

Closes: INSTUI-4380

Test: add the resize property to TextArea component, resize it and observe whether the focusline follows the resizing properly.

@joyenjoyer joyenjoyer self-assigned this Nov 26, 2024
@@ -117,8 +117,8 @@ class TextArea extends Component<TextAreaProps> {
if (this._highlightRef) {
const entryStyle = window.getComputedStyle(entry.target)
this._highlightRef.style.transition = 'none'
this._highlightRef.style.width = `calc(${entryStyle.width}px + 2.125rem)`
this._highlightRef.style.height = `calc(${entryStyle.height}px + 2.125rem)`
this._highlightRef.style.width = `calc(${entryStyle.width} + 0.5rem)`
Copy link
Contributor Author

@joyenjoyer joyenjoyer Nov 26, 2024

Choose a reason for hiding this comment

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

entryStyle.width is a string, which already has 'px' in it. I removed the unneccessary px string from the calc() function and adjusted the proper rem amount.

Copy link

PR Preview Action v1.4.8
🚀 Deployed preview to https://instructure.github.io/instructure-ui/pr-preview/pr-1794/
on branch gh-pages at 2024-11-26 16:41 UTC

Copy link
Collaborator

@matyasf matyasf left a comment

Choose a reason for hiding this comment

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

nice work!
An extra unit test would be nice, but it might be too tricky

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