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

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() {