🪟 🐛 Fix tag input styles #20020
🪟 🐛 Fix tag input styles #20020
Conversation
octavia-squidington-iv
added
area/platform
For the Postgres source, it is not showing the airbyte/airbyte-webapp/src/core/jsonSchema/schemaToYup.ts Lines 145 to 147 in f3d4830 We may have other connectors with string array fields that are required, which should be using this error state, but I don't know off-hand which ones |
| ...provided, | ||
| borderRadius: `${styles.borderRadius}`, | ||
| }), | ||
| control: (provided, state) => { |
There was a problem hiding this comment.
One thing I noticed when testing locally was that when I hovered my cursor over the TagInput it stays as the default cursor, whereas when I hover over the other text input fields it changes to a text cursor. Could we also make this TagInput have a text cursor, so that it is consistent? (And I feel a text cursor also makes sense here because the user is still expected to type values into the field)
There was a problem hiding this comment.
@flash1293 one more small nit here: when hovering over the X close button of one of the tags, could we go back to the default cursor (or maybe pointer, since that seems to be what we use for buttons)? It currently uses the text cursor which looks a little odd.
We should also use the same pointer style for the whole-component clear X button on the right side
| ...provided, | ||
| borderRadius: `${styles.borderRadius}`, | ||
| }), | ||
| control: (provided, state) => { |
There was a problem hiding this comment.
Another thing I noticed while testing locally: this TagInput requires users to type in a value and then hit Enter for that value to be actually added to the field as a tag. If the users just types a value and then clicks away, the value they typed is erased.
I feel like this is not a very clear UX that the user has to press Enter in order for their changes to actually be saved, and it would be better if unfocusing the input also added their text as a tag. I think that behavior actually might have existed before we upgraded the react-select version.
Could you explore adding that functionality here? Also fine if you'd rather address that in a separate PR.
There was a problem hiding this comment.
I agree, it can be very annoying to a user, especially as it works fine when navigating via keyboard. I didn't find a "supported" way, but I think I came up with an acceptable workaround.
There was a problem hiding this comment.
Tried it out and I think this looks good! One question:
This needs to be implemented outside of the onBlur prop of react-select because it's not default behavior.
What do you mean by "it's not default behavior"? Isn't the handleDelete method we are passing to the onBlur prop also not default behavior?
|
@lmossman could you check again? |
| ...provided, | ||
| borderRadius: `${styles.borderRadius}`, | ||
| }), | ||
| control: (provided, state) => { |
There was a problem hiding this comment.
@flash1293 one more small nit here: when hovering over the X close button of one of the tags, could we go back to the default cursor (or maybe pointer, since that seems to be what we use for buttons)? It currently uses the text cursor which looks a little odd.
We should also use the same pointer style for the whole-component clear X button on the right side
| ...provided, | ||
| borderRadius: `${styles.borderRadius}`, | ||
| }), | ||
| control: (provided, state) => { |
There was a problem hiding this comment.
Tried it out and I think this looks good! One question:
This needs to be implemented outside of the onBlur prop of react-select because it's not default behavior.
What do you mean by "it's not default behavior"? Isn't the handleDelete method we are passing to the onBlur prop also not default behavior?
I just mean that the |
What
Fixes #18692
Before:
After (regular, hovered, focused, error):
How
Upgrading react-select made it necessary to overwrite a bunch of additional styles because react-select became more opinionated. This was necessary before, so the existing custom styles could easily be extended.
I couldn't figure out a native way to trigger the error state (I most likely missed it, but even if not we might want to add it at a later point in time), making it required by adding
to
airbyte/airbyte-webapp/src/core/jsonSchema/schemaToYup.ts
Line 85 in e3ef3fd
makes it easy to do so in a synthetic way.
Drive-by changes
🚨 User Impact 🚨
Fixes the visual bug, no changes in behavior.