Here is what it looks like normally:

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

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

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:

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

And here is a material ui text field from polymer:

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.
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.