-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
[core] feat(TagInput): resizable input that scales as you type #5966
[core] feat(TagInput): resizable input that scales as you type #5966
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice, this seems to work really well in the docs preview build!
Looks like the tests are failing because we're using shallow rendering in many of the TagInput tests, and the <ResizeableInput>
children don't get rendered. We can fix that by switching to mount()
instead of shallow()
.
enzymejs/enzyme#1473 |
@adidahiya done all the changes, lmk if there's anything else |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looking good, just a few more minor things
@adidahiya thanks for all the feedback, should be addressed now |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thanks for the thorough PR @JosephChotard 👍
|
||
return ( | ||
<span> | ||
<span id="hide" ref={span} className={Classes.RESIZABLE_INPUT_SPAN}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure why this id
prop is needed / where it's used, but it's causing aXe a11y failures because all id
s must be unique.
Must either remove id
prop, or use uniqueId
for it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PR: #5984
Checklist
Changes proposed in this pull request:
Currently the
TagInput
component (used byMultiSelect2
) does not expand to accomodate the text the user is typing. This is becauseinput
elements don't scale with their input. This causes annoying situations where the user cannot see what they are typing when there is space to display it.To address this issue, I created a small
ResizeableInput
component (could be included inTagInput
but this makes the intent clearer). This new component acts like a regularinput
element for every other component but it has some coding magic that causes it to fit the size of it's content. It will never grow bigger than it's closest parent with aposition: relative
.Reviewers should focus on:
This applies to both
TagInput
andMultiSelect
I checked that:
This PR does not introduce changes to the API and is fully backwards compatible.
Screenshot
Old Input scaling:
New Input scaling:
Old input text being cut off
New input text wrapping