[core] feat(TagInput): resizable input that scales as you type #5966
Conversation
There was a problem hiding this comment.
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().
adidahiya
changed the title
|
enzymejs/enzyme#1473 |
|
@adidahiya done all the changes, lmk if there's anything else |
|
@adidahiya thanks for all the feedback, should be addressed now |
adidahiya
changed the title
|
Looks like there might be a regression with the input width not expanding to the full width of the component when using the
|
|
|
||
| return ( | ||
| <span> | ||
| <span id="hide" ref={span} className={Classes.RESIZABLE_INPUT_SPAN}> |
There was a problem hiding this comment.
Not sure why this id prop is needed / where it's used, but it's causing aXe a11y failures because all ids must be unique.
Must either remove id prop, or use uniqueId for it.
Checklist
Changes proposed in this pull request:
Currently the
TagInputcomponent (used byMultiSelect2) does not expand to accomodate the text the user is typing. This is becauseinputelements 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
ResizeableInputcomponent (could be included inTagInputbut this makes the intent clearer). This new component acts like a regularinputelement 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
TagInputandMultiSelectI 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
