fullWidthInput doesn't work for filled, outlined variants

[benwiley4000]

This issue seems to have been flagged before then marked as fixed but I don't believe the original issue was actually fixed (either that or I found a slightly different issue).

Basically, fullWidthInput only works for the standard input variant. The reason is that the standard input variant places the chips as siblings of the input container element, but the outlined and filled variants place the chips inside of the input container element as a startAdornment.

Example: https://codesandbox.io/s/nervous-fast-ii9t7?file=/src/App.js

[mebs]

We're having the same issue over here.
I think they use adornments because it's an easy way to keep a nice layout without having to rewrite the whole input with a grid in it.
We're living with it in the immediate future but this is a problem we will have to tackle soon and the only way around it will be to write our own chip input.

Does anyone plan on fixing this any time soon? That would really help.

[leMaik]

We're living with it in the immediate future but this is a problem we will have to tackle soon and the only way around it will be to write our own chip input.

@mebs If you need this and consider implementing your own chip input, why not start a PR that fixes the issue instead? :-) That sounds like an easier solution to me.

[mebs]

@mebs If you need this and consider implementing your own chip input, why not start a PR that fixes the issue instead? :-) That sounds like an easier solution to me.

Hey @leMaik, of course that will be considered! Only problem I see is that it could cause problems with company policy to contribute to open source code but I'd have to double check if it ever comes to that.

[nikeee]

Anyone found a workaround for this issue?

[dharkness]

I added a min-width to the input to solve this for my use case. Since my component is used to enter five-digit ZIP codes, I set it to 4em so it stays next to the chips most of the time. Use 100% to force it to the next line.

<ChipInput
  ...
  InputProps={{
    inputProps: { style: { minWidth: '100%' } },
  }}
/>