fix(input): number input width in webkit

Fixes an issue in Webkit browsers where number inputs would collapse to about 1/3 of their proper size, if they're placed in a flexbox and have `min` and `max` attributes.

Fiddle with a simplified example of the issue: https://jsfiddle.net/crisbeto/phm2nuar/3/

Closes #7349.

Closes #7761

Author: crisbeto

src/components/input/input.js

@@ -289,6 +289,7 @@ function inputTextareaDirective($mdUtil, $window, $mdAria, $timeout, $mdGesture)
     var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
     var isReadonly = angular.isDefined(attr.readonly);
     var mdNoAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk);
+    var tagName = element[0].tagName.toLowerCase();
 
 
     if (!containerCtrl) return;
@@ -315,7 +316,13 @@ function inputTextareaDirective($mdUtil, $window, $mdAria, $timeout, $mdGesture)
       element.attr('id', 'input_' + $mdUtil.nextUid());
     }
 
-    if (element[0].tagName.toLowerCase() === 'textarea') {
+    // This works around a Webkit issue where number inputs, placed in a flexbox, that have
+    // a `min` and `max` will collapse to about 1/3 of their proper width. Please check #7349
+    // for more info. Also note that we don't override the `step` if the user has specified it,
+    // in order to prevent some unexpected behaviour.
+    if (tagName === 'input' && attr.type === 'number' && attr.min && attr.max && !attr.step) {
+      element.attr('step', 'any');
+    } else if (tagName === 'textarea') {
       setupTextarea();
     }
 

src/components/input/input.spec.js

@@ -209,6 +209,12 @@ describe('md-input-container directive', function() {
     expect(el.find('label').attr('for')).toBe(el.find('input').attr('id'));
   });
 
+  it('should set the "step" attribute to "any" if "min" and "max" are specified', function() {
+    // check #7349 for more info
+    var el = setup('type="number" min="1" max="999"');
+    expect(el.find('input').attr('step')).toBe('any');
+  });
+
   describe('md-no-asterisk', function() {
 
     it('should not show asterisk on required label if disabled', function() {