🪟 New <TagInput /> #17760
Merged
🪟 New <TagInput /> #17760
Conversation
This file contains 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
github-actions
bot
added
area/platform
teallarson
force-pushed
the
teal/tag-input-improvements
branch
from
344c2ce
to
f8c7fe8
Compare
teallarson
force-pushed
the
teal/tag-input-improvements
branch
from
cc065a4
to
83634b2
Compare
|
Working on cleaning up failing tests, but ready for a look over! |
dizel852
reviewed
Oct 12, 2022
teallarson
commented
Oct 12, 2022
| name={name} | ||
| render={(arrayHelpers) => ( | ||
| <Field name={name} defaultValue={property.default || []}> | ||
| {() => ( |
There was a problem hiding this comment.
Formik says it's deprecating the render prop on Field
dizel852
reviewed
Oct 12, 2022
dizel852
reviewed
Oct 12, 2022
| ...provided, | ||
| maxWidth: "100%", | ||
| display: "flex", | ||
| background: `${styles.backgroundColor}`, |
There was a problem hiding this comment.
Nice trick to use not hard-coded values 👍
dizel852
approved these changes
Oct 12, 2022
There was a problem hiding this comment.
Overall - LGTM 👍
Also tested locally on create source page(Chrome and Firefox).
Found just one issue, but I guess it's not a real world case -
If user tries to paste the copied text with different delimiters:
One, two; three, four;
will be parsed as
Approved, but let's wait for another review
teallarson
force-pushed
the
teal/tag-input-improvements
branch
from
02ffec3
to
4579985
Compare
jhammarstedt
pushed a commit
to jhammarstedt/airbyte
that referenced
this pull request
Oct 31, 2022
* WIP add creatable * appease the compiler * working on it * more work * adding and removing tags works * handle delimiters * component works, testing WIP * mostly working, add tests * cleanup tests * styling of tag items * note to self * cleanup * cleanup some more, delete old components * update style exports and render method * taginput into a describe block * find the tag input in service form tests * cleanup * use simplified queryselector * Update airbyte-webapp/src/components/ui/TagInput/TagInput.module.scss Co-authored-by: Vladimir <[email protected]> Co-authored-by: Vladimir <[email protected]>
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.
What
closes #10985
<CreatableSelect/>NOTE: For this iteration, we will not be implementing using a newline character as a delimiter due to HTML input elements stripping newline characters.
How
The
Controlcomponent houses the field and field value themselves, passing in anonChangefunction that updates the fieldValue when called. TheTagInputuses the fieldValue to generate a list ofTags (each having an id, label, and value that are important for the internals of the component). When a user action triggers the creation of a New Tag (a comma, semicolon, tab, or enter), we call theonChangewhich updates the field value, which triggers the creation of a new Tag as well.Recommended reading order
TagInput.tsxControl.tsxTagInput.test.tsx