Skip to content

Commit

Permalink
fix(input): attributes should match native ones
Browse files Browse the repository at this point in the history
* The input attribute bindings did not match the native ones, and this could cause confusion.
   Now since they are consistent it is super simple to port a previous Angular 2 native input to an `md-input`

Fixes #1065.
  • Loading branch information
devversion committed Aug 17, 2016
1 parent 32eacd2 commit 5967674
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 41 deletions.
4 changes: 2 additions & 2 deletions src/components/input/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Specifying a side twice will result in an exception during initialization.
A simple character counter can be made like the following:

```html
<md-input placeholder="Character count (100 max)" maxLength="100" class="demo-full-width"
<md-input placeholder="Character count (100 max)" maxlength="100" class="demo-full-width"
value="Hello world. How are you?"
#characterCountHintExample>
<md-hint align="end">{{characterCountHintExample.characterCount}} / 100</md-hint>
Expand Down Expand Up @@ -105,7 +105,7 @@ You can make a full form using inputs, and it will support autofill natively.
<table style="width: 100%" cellspacing="0"><tr>
<td><md-input class="demo-full-width" placeholder="City"></md-input></td>
<td><md-input class="demo-full-width" placeholder="State"></md-input></td>
<td><md-input #postalCode class="demo-full-width" maxLength="5"
<td><md-input #postalCode class="demo-full-width" maxlength="5"
placeholder="Postal Code"
value="94043">
<md-hint align="end">{{postalCode.characterCount}} / 5</md-hint>
Expand Down
18 changes: 9 additions & 9 deletions src/components/input/input.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,22 @@
[attr.aria-disabled]="ariaDisabled"
[attr.aria-required]="ariaRequired"
[attr.aria-invalid]="ariaInvalid"
[attr.autocomplete]="autoComplete"
[attr.autocorrect]="autoCorrect"
[attr.autocapitalize]="autoCapitalize"
[autofocus]="autoFocus"
[attr.autocomplete]="autocomplete"
[attr.autocorrect]="autocorrect"
[attr.autocapitalize]="autocapitalize"
[autofocus]="autofocus"
[disabled]="disabled"
[id]="inputId"
[attr.list]="list"
[attr.max]="max"
[attr.maxlength]="maxLength"
[attr.maxlength]="maxlength"
[attr.min]="min"
[attr.minlength]="minLength"
[readonly]="readOnly"
[attr.minlength]="minlength"
[readonly]="readonly"
[required]="required"
[spellcheck]="spellCheck"
[spellcheck]="spellcheck"
[attr.step]="step"
[attr.tabindex]="tabIndex"
[attr.tabindex]="tabindex"
[type]="type"
[attr.name]="name"
(focus)="_handleFocus($event)"
Expand Down
42 changes: 21 additions & 21 deletions src/components/input/input.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ describe('MdInput', function () {
expect(el).not.toBeNull();
expect(el.getAttribute('autocomplete')).toBeNull();

input.autoComplete = 'on';
input.autocomplete = 'on';
fixture.detectChanges();
expect(el.getAttribute('autocomplete')).toEqual('on');
});
Expand All @@ -284,7 +284,7 @@ describe('MdInput', function () {
expect(el).not.toBeNull();
expect(el.getAttribute('autocorrect')).toBeNull();

input.autoCorrect = 'on';
input.autocorrect = 'on';
fixture.detectChanges();
expect(el.getAttribute('autocorrect')).toEqual('on');
});
Expand All @@ -299,7 +299,7 @@ describe('MdInput', function () {
expect(el).not.toBeNull();
expect(el.getAttribute('autocapitalize')).toBeNull();

input.autoCapitalize = 'on';
input.autocapitalize = 'on';
fixture.detectChanges();
expect(el.getAttribute('autocapitalize')).toEqual('on');
});
Expand Down Expand Up @@ -334,7 +334,7 @@ describe('MdInput', function () {
expect(el).not.toBeNull();
expect(el.getAttribute('autofocus')).toBeNull();

input.autoFocus = true;
input.autofocus = true;
fixture.detectChanges();
expect(el.getAttribute('autofocus')).toEqual('');
});
Expand Down Expand Up @@ -442,7 +442,7 @@ describe('MdInput', function () {
expect(el).not.toBeNull();
expect(el.getAttribute('readonly')).toBeNull();

input.readOnly = true;
input.readonly = true;
fixture.detectChanges();
expect(el.getAttribute('readonly')).toEqual('');
});
Expand Down Expand Up @@ -492,7 +492,7 @@ describe('MdInput', function () {
expect(el).not.toBeNull();
expect(el.getAttribute('spellcheck')).toEqual('false');

input.spellCheck = true;
input.spellcheck = true;
fixture.detectChanges();
expect(el.getAttribute('spellcheck')).toEqual('true');
});
Expand Down Expand Up @@ -532,7 +532,7 @@ describe('MdInput', function () {
expect(el).not.toBeNull();
expect(el.getAttribute('tabindex')).toEqual(null);

input.tabIndex = 1;
input.tabindex = 1;
fixture.detectChanges();
expect(el.getAttribute('tabindex')).toEqual('1');
});
Expand Down Expand Up @@ -630,43 +630,43 @@ class MdInputWithBlurAndFocusEvents {
@Component({template: `<md-input name="some-name"></md-input>`})
class MdInputWithNameTestController { }

@Component({template: `<md-input [autoComplete]="autoComplete"></md-input>`})
@Component({template: `<md-input [autocomplete]="autoComplete"></md-input>`})
class MdInputWithAutocomplete { }

@Component({template: `<md-input autoComplete></md-input>`})
@Component({template: `<md-input autocomplete></md-input>`})
class MdInputWithUnboundAutocomplete { }

@Component({template: `<md-input autoComplete="name"></md-input>`})
@Component({template: `<md-input autocomplete="name"></md-input>`})
class MdInputWithUnboundAutocompleteWithValue { }

@Component({template: `<md-input [autoCorrect]="autoCorrect"></md-input>`})
@Component({template: `<md-input [autocorrect]="autoCorrect"></md-input>`})
class MdInputWithAutocorrect { }

@Component({template: `<md-input autoCorrect></md-input>`})
@Component({template: `<md-input autocorrect></md-input>`})
class MdInputWithUnboundAutocorrect { }

@Component({template: `<md-input [autoCapitalize]="autoCapitalize"></md-input>`})
@Component({template: `<md-input [autocapitalize]="autoCapitalize"></md-input>`})
class MdInputWithAutocapitalize { }

@Component({template: `<md-input autoCapitalize></md-input>`})
@Component({template: `<md-input autocapitalize></md-input>`})
class MdInputWithUnboundAutocapitalize { }

@Component({template: `<md-input [autoFocus]="autoFocus"></md-input>`})
@Component({template: `<md-input [autofocus]="autoFocus"></md-input>`})
class MdInputWithAutofocus { }

@Component({template: `<md-input autoFocus></md-input>`})
@Component({template: `<md-input autofocus></md-input>`})
class MdInputWithUnboundAutofocus { }

@Component({template: `<md-input [readOnly]="readOnly"></md-input>`})
@Component({template: `<md-input [readonly]="readOnly"></md-input>`})
class MdInputWithReadonly { }

@Component({template: `<md-input readOnly></md-input>`})
@Component({template: `<md-input readonly></md-input>`})
class MdInputWithUnboundReadonly { }

@Component({template: `<md-input [spellCheck]="spellcheck"></md-input>`})
@Component({template: `<md-input [spellcheck]="spellcheck"></md-input>`})
class MdInputWithSpellcheck { }

@Component({template: `<md-input spellCheck></md-input>`})
@Component({template: `<md-input spellcheck></md-input>`})
class MdInputWithUnboundSpellcheck { }

@Component({template: `<md-input [disabled]="disabled"></md-input>`})
Expand Down Expand Up @@ -695,5 +695,5 @@ class MdInputWithMin { }
@Component({template: `<md-input [step]="step"></md-input>`})
class MdInputWithStep { }

@Component({template: `<md-input [tabIndex]="tabIndex"></md-input>`})
@Component({template: `<md-input [tabindex]="tabIndex"></md-input>`})
class MdInputWithTabindex { }
18 changes: 9 additions & 9 deletions src/components/input/input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -142,23 +142,23 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
@Input() @BooleanFieldValue() floatingPlaceholder: boolean = true;
@Input() hintLabel: string = '';

@Input() autoComplete: string;
@Input() autoCorrect: string;
@Input() autoCapitalize: string;
@Input() @BooleanFieldValue() autoFocus: boolean = false;
@Input() autocomplete: string;
@Input() autocorrect: string;
@Input() autocapitalize: string;
@Input() @BooleanFieldValue() autofocus: boolean = false;
@Input() @BooleanFieldValue() disabled: boolean = false;
@Input() id: string = `md-input-${nextUniqueId++}`;
@Input() list: string = null;
@Input() max: string | number = null;
@Input() maxLength: number = null;
@Input() maxlength: number = null;
@Input() min: string | number = null;
@Input() minLength: number = null;
@Input() minlength: number = null;
@Input() placeholder: string = null;
@Input() @BooleanFieldValue() readOnly: boolean = false;
@Input() @BooleanFieldValue() readonly: boolean = false;
@Input() @BooleanFieldValue() required: boolean = false;
@Input() @BooleanFieldValue() spellCheck: boolean = false;
@Input() @BooleanFieldValue() spellcheck: boolean = false;
@Input() step: number = null;
@Input() tabIndex: number = null;
@Input() tabindex: number = null;
@Input() type: string = 'text';
@Input() name: string = null;

Expand Down

0 comments on commit 5967674

Please sign in to comment.