md-input-container input type="number" field resizes after value input

[kanethal]

Initial placement is fine. Upon entering a number, the field resizes. I tried setting

    md-input-container input[type="number"]{
      width: auto;
      -moz-appearance: textfield;
      -webkit-appearance: textfield;
    }

as per another post (#4864), without results.

[topherfangio]

Can you please provide a Codepen showing the issue? Particularly, I'd like to know what your layout/container looks like.

[kanethal]

Thank you for replying.
Problem is reproduced here: http://codepen.io/kanethal/pen/remgeE

Probably something obvious, thanks for your interest

On Thu, Mar 24, 2016 at 1:16 PM, Topher Fangio notifications@github.com
wrote:

Can you please provide a Codepen showing the issue? Particularly, I'd like
to know what your layout/container looks like.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
#7349 (comment)

[topherfangio]

@kanethal You can probably use min-width to fix this temporarily, but it definitely seems like a bug.

@crisbeto Can you take a look at this please?

[crisbeto]

Sure and also wow that's some trippy behaviour.

[kanethal]

Great thanks, I'm still learning, and it can be tricky to differentiate
between my bad authoring and legit bugs ;).

These were setup to flex. I worked around the sizing issue by changing the
input type to just text. Not sure how to use min-width and maintain the
responsive sizing!

Thanks for your interest, Dan.
On Mar 25, 2016 12:49 PM, "Topher Fangio" notifications@github.com wrote:

@kanethal https://github.com/kanethal You can probably use min-width to
fix this temporarily, but it definitely seems like a bug.

@crisbeto https://github.com/crisbeto Can you take a look at this
please?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#7349 (comment)

[crisbeto]

This seems to be some kind of strange behaviour in Webkit (IE, Edge and Firefox don't have it, but Chrome, Safari and Opera do) that happens if the input is type="number", has both a min and a max (if it's only one of them it doesn't happen) and is inside a display: flex. The browser seems to set the input width so it can fit the amount of digits in the max +/- a couple of characters and ignores all other widths. For example if you have a max of 999, it resizes to fit ~4-5 characters. In the demo, the width is initially fine because the ng-messages is pushing it out, but when you enter a valid value, the ng-messages get removed from the DOM which makes it collapse.

I didn't manage to hack around it with CSS (e.g. display: block, width: 100%, min-width: 100% etc.) and I didn't find anything in the user agent styles that might be causing this. On the other hand I did find that that setting the step attribute to any fixes the issue, but any other values for step don't.

@topherfangio I'll put in a PR for setting the step to any if both min and max are present.

For future reference, here's a minimal way of reproducing it:

<div layout>
    <input type="number" min="1" max="999">
</div>

[topherfangio]

@crisbeto Wow; that sounds like fun. Out of curiosity, did you test this with a plain number input? I'm wondering if there is something that Material is doing to cause it.

[crisbeto]

EDIT: Also here's a fiddle https://jsfiddle.net/crisbeto/phm2nuar/1/
Just tried it, it's the same with a plain number input as well.