diff --git a/src/components/input/input.js b/src/components/input/input.js index 04635dc705d..3d2888b52d8 100644 --- a/src/components/input/input.js +++ b/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(); } diff --git a/src/components/input/input.spec.js b/src/components/input/input.spec.js index 70454b2b54d..c2502dbcd14 100644 --- a/src/components/input/input.spec.js +++ b/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() {