TagInput Styling issues

[JayYoungman]

There seems to be some issues with the TagInput styling in the latets upgrade. 10.5.3. We are trying to migrate from v5, with various issues, but aren't getting any response from here when creating tickets. Heres another;

The changelog suggests the tag input gets a 100% width, when in fact its default width is 280px if no width is provided, this is causing all kinds of issues, and when we are trying to pass a new width in via input props, these don't even get added to the input, but the parent div. It seems you've really regressed with your components in this update. Adding static heights and widths onto inputs like this makes it really difficult to use. I've added some screenshots but won't hold my breath waiting to hear from you.

Notice our parent width is 40%, based on a reponsive size. And your tag input is just overflowing this, with 280px.

[brandongregoryscott]

Hey @JayYoungman,

Can you provide a minimal code sandbox with the version you are currently on and the version you're trying to upgrade to that has the static width issue? The TagInput was recently updated a few times - primarily for the autocomplete capability, (https://github.com/segmentio/evergreen/pull/1400) and later to fix how the underlying input element is centered in certain cases (https://github.com/segmentio/evergreen/pull/1476), so it's possible we missed an edge case in there. The width for the TagInput and the width in inputProps do work a little differently because of how the component is structured (the top-level prop controls the width of the outer container, and the inputProps.width prop controls the width of the underlying input element which can be used to clip tags onto a new line earlier, for example.)

Finally, I'd encourage you to take a look over our Code of Conduct for future questions or issues you might raise. While we provide Evergreen free for the community to build with, it primarily exists as the design system for our own applications. We don't have a full team dedicated to features, maintenance, etc., so your patience is appreciated while we triage issues.

[JayYoungman]

Hi @brandongregoryscott

First off, apologies for the tone of the message, it's been quite frustrating with this migration from v5 to v6. Im afraid it really hasn't been very well documented. We have raised a few issues, but again I must apologise, as we was not aware this was not fully maintained, it does state on the github it is maintained and supported, as well as documentation being a priority.

Evergreen is now a huge part of our production app, i'd probably ask that the Github gets updated so people are aware this this project is not fully maintained and its main use case is for your own applications, If we had known this, we would probably have gone with a different UI library.

Thanks for taking the time to reply to the ticket, will paste the sandbox asap

Thanks

[JayYoungman]

@brandongregoryscott

Here is a link to the sandbox https://codesandbox.io/s/inspiring-mcclintock-ohsq9h

As you can see, i have a flex container, with 3 elements inside, they are % based widths, notice when inspecting the input element in dev tools, the tag input overflow its field, in our application it expands off the page, or in places where there is a button or element to right, it expands overt the top of it. This can be avoided by adding width: 0 in inputProps, however this causes other issues, and a bit of the border still gets cut off.

Thanks for taking a look.

Jay

[brandongregoryscott]

Hey @JayYoungman, it looks like this was a regression with #1476. Using v6.9.11 doesn't seem to have this issue. I'll look into a fix for this. Thanks for flagging!

[JayYoungman]

@brandongregoryscott Thanks very much for your time and patience.

we will try downgrading to 6.9.11 for the time being.

thanks again.

[JayYoungman]

HI @brandongregoryscott

FYI there seems to still be an issue on 6.9.11, there is a strange padding left: 4px, on the container div for the TagInput, not sure if this is fixed in a later version, but the TagInput component on the evergreen docs doesnt have this 4px padding-left on the container div.

Cheers

[brandongregoryscott]

HI @brandongregoryscott

FYI there seems to still be an issue on 6.9.11, there is a strange padding left: 4px, on the container div for the TagInput, not sure if this is fixed in a later version, but the TagInput component on the evergreen docs doesnt have this 4px padding-left on the container div.

Cheers

Can you provide a screenshot of that? I'm not seeing it on your Codesandbox example pointed @ 6.9.11

[JayYoungman]

Hi @brandongregoryscott

Yep just checked out the sandbox and you are right it does not show on there. However here is a screenshot of our application, with the appended class ub-pl_4px being appended to it, very confused with this one!

[JayYoungman]

We've temporarily fixed with InputProps width 99%

[brandongregoryscott]

@JayYoungman I think it's actually from the classicTheme - if you wrap that Codesandbox with <ThemeProvider value={classicTheme}>, I'm seeing the padding-left: 4px class now.

[JayYoungman]

@brandongregoryscott ah that will explain it then!

I'm wondering if there is any point in us continuing to use the classicTheme, but as there has been so much design changes and this app is in production i'd need to run this by the directors!

Thank you so much for your time, i honestly really appreciate it.