fix(ui-text-input): fix long before elements overflowing in TextInput, Select,SimpleSelect

[matyasf]

Closes: INSTUI-4344

When adding lots of elements like Tags it was overflowing the input field, this commit fixes it

This bug was introduced with #1696 when we added a Flex layout without wrap.

TEST PLAN:
Add lots of elements to renderBeforeInput to Select,SimpleSelect,TextInput. They should wrap not overflow

[github-actions]

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-12-06 15:49 UTC

[balzss]

I've checked it and seems like it was also buggy in v9, so might not be a regression in the commit you've linked. Also the spacing is a bit odd:

I would suggest using the gap css prop instead of adding margins to every pill/tag.

Another thing: shouldn't the input tag wrap with the pill too, instead of being on a new line:

[balzss]

see my comment above

[matyasf]

I dont like this solution, that we have an extra DOM element just to add a bit of padding. (this is needed when there is renderBeforeInput, e.g. Tags) But I could not find a better solution, what I've tried:

1. Use a tricky CSS, that adds padding if the first child of the layout span is NOT the inputLayout: '&:has(> :first-child:not([class$="textInput__inputLayout"]))'. While this works nice in the browser it crashes in Vite tests because of a bug in a dependency: Some uses of :has throw "not a valid selector" dperini/nwsapi#123
   So using this solution means that users will need to use either the latest Jest or a patched version of Jest where nwsapi is at the latest version, which is not cool IMO.

2. Do some JS magic to figure out the width of the renderBeforeInput elements: This is what the old code was doing, now it would need to be even more complicated because we're not wrapping renderBeforeInput in a div anymore, so we need to take care of the case that its a React fragment/text/whatever weirdness users put there.

While the current solution is a bit ugly because of the extra DOM element and the padding is added if the renderBeforeInput's width is 0, its still the best I could find.

[joyenjoyer]

As we discussed adding padding to the container would be an easier solution, please fix.

[joyenjoyer]

Please add a padding to the container instead of the divider solution.

[balzss]

looks good. later we could simplify this by removing the margins and paddings from the Tags and using flex gap but that would require rewriting our examples and breaking existing code that users need to update