material-ui-chip-input Support for start and end adornments

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: screenshot 2018-11-27 at 2 11 21 pm

This is how I need it to look: screenshot 2018-11-27 at 2 11 31 pm

And when a new chip is added, this is how it looks: screenshot 2018-11-27 at 2 11 42 pm

This is how I need it to look: screenshot 2018-11-27 at 2 16 39 pm

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

Nov 27 '18 08:11 abilash13

Indeed, it would be great if this worked! :open_mouth:

@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. :sunglasses:

Nov 28 '18 09:11 leMaik

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

Nov 30 '18 14:11 me245

@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. :man_student:

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! :+1: Please just make sure that nothing else breaks (i.e. look into the storybook, check the tests).

Nov 30 '18 15:11 leMaik

@me245 Any updates on this?

Dec 06 '18 13:12 leMaik

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

Dec 06 '18 15:12 me245

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

Dec 09 '18 16:12 leMaik

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!