Material-ui: Browser's native input autocomplete functionality renders funny in TextField

Created on 5 May 2017  路  4Comments  路  Source: mui-org/material-ui

  • Material-UI: 0.18.0
  • React: 15.5.4
  • Browser: Chrome 57.0.2987.133 (64-bit)
  • Version: 10.11.6

Here is what it looks like normally:
img1

Here is what it looks like with the browser's native drop down list activated:
img2

Here is what it looks like after choosing something from the browser's native drop down list. It turns yellow for some reason:
img3

bug 馃悰 TextField

Most helpful comment

That's the default Chrome browser behavior to notifies the autocomplete having been done. I don't think that we should override that behavior. It's an important part of the UX.

All 4 comments

That's the default Chrome browser behavior to notifies the autocomplete having been done. I don't think that we should override that behavior. It's an important part of the UX.

OK. Forget about the yellow thing. You are right. That is standard browser behavior.

So let's just focus on the fact the top of the dropdown box is about one em below the bottom of the text input.

Here is the drop down on Amazon's _real_ "Create account" form:
mui-1

And here is my material-ui version of the same form:
mui-2

And here is a material ui text field from polymer:
mui-3

I would say that the top of dropdown box should be flush with the bottom of the text input. Right?

You are right, the input is pretty large. That should be fixed on the next branch. The size of the input matches the typing area.

Closing as I have tried it, it's much better on the next branch.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  3Comments

FranBran picture FranBran  路  3Comments

mattmiddlesworth picture mattmiddlesworth  路  3Comments

iamzhouyi picture iamzhouyi  路  3Comments

chris-hinds picture chris-hinds  路  3Comments