Add option to display chips under autocompletebox

[amit1911]

I think it'll be useful if we can an option to display the chips under the input box instead of at the top as in cases when there are a lot of chips, the input keeps shifting down. it'll be nice to have the input stay at the top and the chips displayed under it. Take a look at the following pic. This should be easy to do as we just need to change the order of components in the render method depending on a prop.

[leMaik]

Good idea, PR welcome! :+1:

[amit1911]

I'll try to work on it during this weekend

[amit1911]

Started working on this but turns out it requires more work than I thought. Just moving the chip rendering under the 'error text' display does't work as the styling get's messed up. Some of the issues that I noticed are:-

• The chips overlap with the 'error text' display.
• There is extra space under the floating label that was initially intended for chips.
• Moreover, changing the chips element position might break someone's custom css due to change in component structure. For example, initially the chips could be styled by passing the className prop (let's assume className='mui-chip-input-root') and then using .mui-chip-input-root > div > div > div. But if we change the structure, then this css might not work. So we need to think about this as well.

There might be some other things to look into as well. So will need more time to do a detailed investigation. I might not be able to work on it in the next few weeks so if anyone else is interested please feel free to pitch in.

[leMaik]

@amit1911 Thank you for trying, though! Material-UI currently gets a full rewrite, so maybe we should wait for them to finish before trying to implement this. The chip input needs to be re-written anyway because of all the breaking changes in the rewrite. :confused:

Regarding the structure changes: I never officially supported using CSS for styling. There are supported style props that should be used for styling, so that wouldn't be a problem.

[GlebVST]

Hey guys, not all internal divs are supported with style props so right now you can't do everything you could do with CSS... If you don't mind some SCSS, here is what I have for my chips-under:

.multiSelect {
  height: 200px;
  > div:nth-child(1) {
    padding-top: 8px;
    > div:nth-child(1) {
      > label {
        top: 18px;
      }
      > div {
        top:60px;
        position: absolute;
        max-height: 180px;
        overflow-y: auto;
      }
    }
  }
}

And

<Col xs={12} className={css.multiSelect}>
    <ChipInput      
            floatingLabelText="Type and select one or more practice areas"
            ...
    />
</Col>

If you don't want to support CSS, maybe add more internal style props?

[bnbon]

Any idea if this could become a feature? I mainly want to avoid the position of this input changing, so maybe if there could be a way to make this render into another component or DOM item? like target=".list" or "target="#test"?

Its a great component though!