Support for start and end adornments

[abilash13]

Right now, if we add a startAdornment and endAdornment to the InputProps, it looks and acts strange.

For example, this is how it looks for an empty chip input with start and end adornments:

This is how I need it to look:

And when a new chip is added, this is how it looks:

This is how I need it to look:

Any idea if I can get this behavior by tweaking something?

[leMaik]

Indeed, it would be great if this worked! 😮

@abilash13 If you want to give it a try, this looks like a styling issue. The chipContainer, input and inputRoot styles might be a good place to start (https://github.com/TeamWertarbyte/material-ui-chip-input/blob/master/src/ChipInput.js#L31).
I'd suggest to add a story with an input with adornments, so you could play around with hot reloading. 😎

[me245]

Is there any particular reason that most of the styling on the chip input is done with display: inline-block and margins instead of flex-box? Material-ui inputs are done with flex-box from what I am seeing. I am working on a project where I need this and due to time constraints am going to fix it inline. If there aren't already discussed reasons against flex-box I can make a pull request with my changes in order to get start adornments working and in the correct location

[leMaik]

@me245 No specific reason, might be some artifacts from the port from v0 to v1. Please feel free to change that, I'd be happy to see a PR.
Unfortunately, I'm very busy until this christmas. 👨‍🎓

If there aren't already discussed reasons against flex-box I can make a pull request with my changes in order to get start adornments working and in the correct location

Sounds great! 👍 Please just make sure that nothing else breaks (i.e. look into the storybook, check the tests).

[leMaik]

@me245 Any updates on this?

[me245]

I have a working solution for filled and outline inputs. I can make the changes for the default input too, just had a time constraint. As I am doing the default input, I am noticing a fair amount of duplicated css code that I am not liking. As I know other people are interested in this feature I can get that PR in, but I would want another issue put in to do some refactoring to use InputBase. I could use #244 as the issue to refactor, as that would be the fix for the issue that I am seeing

[leMaik]

@me245 Sounds good, you can do both in a single PR, if you want. 👍

[ndtreviv]

I was trying it like this:

                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <QuestionAnswerIcon />
                    </InputAdornment>
                  )
                }}

Which is the standard way of doing it with material-ui TextField objects. Obviously it doesn't work, so looking forward to this PR being merged!

[Mortuie]

Any progress on this? Would be great if it worked?

[sahanjith]

Any progress on this issue? Why the PR is not merged still?

[VGamezz19]

any update?

[ndtreviv]

Yeah, use this instead: https://material-ui.com/components/chips/