Material-ui: Autocomplete demo component with TextField label

Created on 6 Aug 2018  路  3Comments  路  Source: mui-org/material-ui

https://codesandbox.io/s/j74yvm2zkv

While label provided to TextField Component works fine (floats if there is a value and comes down to input field if input is empty), but with InputProps provided like in the Autocomplete demo, label doesn't floats if there is value. It floats only while input is focused.

  • [x] This is a v1.x issue.
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Label should float if there is value in input field. Attached codesandbox link.

Current Behavior

Label doesn't float and no prop floatingLabelFixed found

Steps to Reproduce

Link:

  1. https://codesandbox.io/s/j74yvm2zkv
  2. https://material-ui.com/demos/autocomplete/

Context

If the label doesn't float, then we can not see the label if the chips are there in the input field.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.4.3 |
| React | 16.4.2 |
| browser | chrome |
| etc. | |

Autocomplete enhancement

Most helpful comment

@abhijeetahuja this is the solution that I found for the problem.

InputLabelProps={{
shrink: true,
}}

And it seems is the same choose by @oliviertassinari

All 3 comments

on your codepen, i saw that we can input a new value by pressing enter after writing something. this behavior is not available on the demo. Does the component support this already or is it a custom change you made?

That's a custom change, I am using creatable from react-select.

@abhijeetahuja this is the solution that I found for the problem.

InputLabelProps={{
shrink: true,
}}

And it seems is the same choose by @oliviertassinari

Was this page helpful?
0 / 5 - 0 ratings