Skip to content

Commit 8f477c3

Browse files
author
Vivian Hu
committed
feat(input): add native select to be form input
1 parent 72fdab9 commit 8f477c3

File tree

14 files changed

+43
-39
lines changed

14 files changed

+43
-39
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ npm-debug.log
3939
testem.log
4040
/.chrome
4141
/.git
42+
/.firebase
4243

4344
# schematics
4445
/src/lib/schematics/**/*.js

‎src/demo-app/input/input-demo.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<form>
55
<mat-form-field class="demo-full-width">
66
<mat-label>Company (disabled)</mat-label>
7-
<input matInput disabled value="Google">
7+
<input matNativeControl disabled value="Google">
88
</mat-form-field>
99

1010
<table style="width: 100%" cellspacing="0"><tr>
@@ -28,7 +28,7 @@
2828
</mat-form-field>
2929
<mat-form-field class="demo-full-width">
3030
<mat-label>Address 2</mat-label>
31-
<textarea matInput></textarea>
31+
<textarea matNativeControl></textarea>
3232
</mat-form-field>
3333
</p>
3434
<table style="width: 100%" cellspacing="0"><tr>

‎src/demo-app/select/select-demo.html

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<h4>Basic</h4>
88
<mat-form-field class="demo-full-width">
99
<mat-label>Select your car</mat-label>
10-
<select matControl id="mySelectId">
10+
<select matNativeControl id="mySelectId">
1111
<option value="" disabled selected></option>
1212
<option value="volvo">Volvo</option>
1313
<option value="saab" disabled>Saab</option>
@@ -18,7 +18,7 @@ <h4>Basic</h4>
1818
<h4>Disabled and required</h4>
1919
<mat-form-field class="demo-full-width">
2020
<mat-label>Select your car (disabled)</mat-label>
21-
<select matControl disabled required>
21+
<select matNativeControl disabled required>
2222
<option value="volvo">Volvo</option>
2323
<option value="saab">Saab</option>
2424
<option value="mercedes">Mercedes</option>
@@ -28,7 +28,7 @@ <h4>Disabled and required</h4>
2828
<h4>Floating label</h4>
2929
<mat-form-field>
3030
<mat-label>Float with value</mat-label>
31-
<select matControl>
31+
<select matNativeControl>
3232
<option value="volvo">Volvo</option>
3333
<option value="saab">Saab</option>
3434
<option value="mercedes">Mercedes</option>
@@ -37,7 +37,7 @@ <h4>Floating label</h4>
3737
</mat-form-field>
3838
<mat-form-field>
3939
<mat-label>Not float when empty</mat-label>
40-
<select matControl>
40+
<select matNativeControl>
4141
<option value="" selected></option>
4242
<option value="saab">Saab</option>
4343
<option value="mercedes">Mercedes</option>
@@ -46,7 +46,7 @@ <h4>Floating label</h4>
4646
</mat-form-field>
4747
<mat-form-field>
4848
<mat-label>Float with no value, but with label</mat-label>
49-
<select matControl>
49+
<select matNativeControl>
5050
<option value="" selected label="--select one--"></option>
5151
<option value="saab">Saab</option>
5252
<option value="mercedes">Mercedes</option>
@@ -55,7 +55,7 @@ <h4>Floating label</h4>
5555
</mat-form-field>
5656
<mat-form-field>
5757
<mat-label>Float with no value, but with html</mat-label>
58-
<select matControl>
58+
<select matNativeControl>
5959
<option value="" selected>--select one--</option>
6060
<option value="saab">Saab</option>
6161
<option value="mercedes">Mercedes</option>
@@ -65,7 +65,7 @@ <h4>Floating label</h4>
6565
<h4>Looks</h4>
6666
<mat-form-field appearance="legacy">
6767
<mat-label>Legacy</mat-label>
68-
<select matControl required>
68+
<select matNativeControl required>
6969
<option value="volvo">Volvo</option>
7070
<option value="saab">Saab</option>
7171
<option value="mercedes">Mercedes</option>
@@ -74,7 +74,7 @@ <h4>Looks</h4>
7474
</mat-form-field>
7575
<mat-form-field appearance="standard">
7676
<mat-label>Standard</mat-label>
77-
<select matControl required>
77+
<select matNativeControl required>
7878
<option value="volvo">Volvo</option>
7979
<option value="saab">Saab</option>
8080
<option value="mercedes">Mercedes</option>
@@ -83,7 +83,7 @@ <h4>Looks</h4>
8383
</mat-form-field>
8484
<mat-form-field appearance="fill">
8585
<mat-label>Fill</mat-label>
86-
<select matControl required>
86+
<select matNativeControl required>
8787
<option value="volvo">Volvo</option>
8888
<option value="saab">Saab</option>
8989
<option value="mercedes">Mercedes</option>
@@ -92,7 +92,7 @@ <h4>Looks</h4>
9292
</mat-form-field>
9393
<mat-form-field appearance="outline">
9494
<mat-label>Outline</mat-label>
95-
<select matControl>
95+
<select matNativeControl>
9696
<option value="volvo">volvo</option>
9797
<option value="saab">Saab</option>
9898
<option value="mercedes">Mercedes</option>
@@ -101,7 +101,7 @@ <h4>Looks</h4>
101101
</mat-form-field>
102102
<h4>Option group</h4>
103103
<mat-form-field>
104-
<select matControl>
104+
<select matNativeControl>
105105
<optgroup label="Swedish Cars">
106106
<option value="volvo">volvo</option>
107107
<option value="saab">Saab</option>
@@ -114,7 +114,7 @@ <h4>Option group</h4>
114114
</mat-form-field>
115115
<h4>Place holder</h4>
116116
<mat-form-field class="demo-full-width">
117-
<select matControl placeholder="place holder">
117+
<select matNativeControl placeholder="place holder">
118118
<option value="" disabled selected></option>
119119
<option value="volvo">Volvo</option>
120120
<option value="saab" disabled>Saab</option>
@@ -125,7 +125,7 @@ <h4>Place holder</h4>
125125
<h4>Error message, hint, form sumbit</h4>
126126
<mat-form-field class="demo-full-width">
127127
<mat-label>Select your car (required)</mat-label>
128-
<select matControl required [formControl]="selectFormControl">
128+
<select matNativeControl required [formControl]="selectFormControl">
129129
<option label="--select something --"></option>
130130
<option value="saab">Saab</option>
131131
<option value="mercedes">Mercedes</option>
@@ -140,7 +140,7 @@ <h4>Error message, hint, form sumbit</h4>
140140
<h4>Error message with errorStateMatcher</h4>
141141
<mat-form-field class="demo-full-width">
142142
<mat-label>Select your car</mat-label>
143-
<select matControl required [formControl]="selectFormControl" [errorStateMatcher]="matcher">
143+
<select matNativeControl required [formControl]="selectFormControl" [errorStateMatcher]="matcher">
144144
<option label="--select something --"></option>
145145
<option value="saab">Saab</option>
146146
<option value="mercedes">Mercedes</option>

‎src/lib/input/input.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,11 +127,12 @@ select.mat-input-element::-ms-expand {
127127
display: none;
128128
}
129129

130-
//encoded material design select arrow svg
130+
// Encoded material design select arrow svg
131131
/* stylelint-disable max-line-length */
132132
$mat-native-select-arrow-svg: 'data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2210%22%20height%3D%225%22%20viewBox%3D%227%2010%2010%205%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%230%22%20fill-rule%3D%22evenodd%22%20opacity%3D%22.54%22%20d%3D%22M7%2010l5%205%205-5z%22%2F%3E%3C%2Fsvg%3E';
133133
/* stylelint-enable */
134134

135+
// Remove the native select down arrow and replace it with material design arrow
135136
select.mat-input-element {
136137
-moz-appearance: none;
137138
-webkit-appearance: none;

‎src/lib/input/input.spec.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1320,7 +1320,7 @@ function createComponent<T>(component: Type<T>,
13201320
@Component({
13211321
template: `
13221322
<mat-form-field>
1323-
<input matInput id="test-id" placeholder="test">
1323+
<input matNativeControl id="test-id" placeholder="test">
13241324
</mat-form-field>`
13251325
})
13261326
class MatInputWithId {}
@@ -1527,7 +1527,8 @@ class MatInputWithDynamicLabel {
15271527
@Component({
15281528
template: `
15291529
<mat-form-field>
1530-
<textarea matInput [rows]="rows" [cols]="cols" [wrap]="wrap" placeholder="Snacks"></textarea>
1530+
<textarea matNativeControl [rows]="rows" [cols]="cols" [wrap]="wrap" placeholder="Snacks">
1531+
</textarea>
15311532
</mat-form-field>`
15321533
})
15331534
class MatInputTextareaWithBindings {
@@ -1743,7 +1744,7 @@ class AutosizeTextareaInAStep {}
17431744
@Component({
17441745
template: `
17451746
<mat-form-field>
1746-
<select matInput id="test-id" [disabled]="disabled" [required]="required">
1747+
<select matNativeControl id="test-id" [disabled]="disabled" [required]="required">
17471748
<option value="volvo">Volvo</option>
17481749
<option value="saab">Saab</option>
17491750
<option value="mercedes">Mercedes</option>
@@ -1759,7 +1760,7 @@ class MatInputSelect {
17591760
@Component({
17601761
template: `
17611762
<mat-form-field>
1762-
<select matInput>
1763+
<select matNativeControl>
17631764
<option value="" disabled selected></option>
17641765
<option value="saab">Saab</option>
17651766
<option value="mercedes">Mercedes</option>
@@ -1772,7 +1773,7 @@ class MatInputSelectWithNoLabelNoValue {}
17721773
@Component({
17731774
template: `
17741775
<mat-form-field>
1775-
<select matInput>
1776+
<select matNativeControl>
17761777
<option value="" label="select a car"></option>
17771778
<option value="saab">Saab</option>
17781779
<option value="mercedes">Mercedes</option>
@@ -1785,7 +1786,7 @@ class MatInputSelectWithLabel {}
17851786
@Component({
17861787
template: `
17871788
<mat-form-field>
1788-
<select matInput>
1789+
<select matNativeControl>
17891790
<option value="">select a car</option>
17901791
<option value="saab">Saab</option>
17911792
<option value="mercedes">Mercedes</option>

‎src/lib/input/input.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@ export const _MatInputMixinBase = mixinErrorState(MatInputBase);
5858

5959
/** Directive that allows a native input to work inside a `MatFormField`. */
6060
@Directive({
61-
selector: `input[matInput], textarea[matInput], select[matControl]`,
61+
selector: `input[matInput], textarea[matInput], select[matNativeControl],
62+
input[matNativeControl], textarea[matNativeControl]`,
6263
exportAs: 'matInput',
6364
host: {
6465
/**
@@ -356,12 +357,12 @@ export class MatInput extends _MatInputMixinBase implements MatFormFieldControl<
356357
*/
357358
get shouldLabelFloat(): boolean {
358359
if (this._isNativeSelect) {
359-
// For multi select, float mat input label
360-
// If single select has value or has a option label or html, float mat input label to avoid
361-
// mat input label to overlap with the select content.
362-
const selectElement = this._elementRef.nativeElement;
363-
return selectElement.multiple || !this.empty || selectElement.options[0].label
364-
|| this.focused;
360+
// If multi select, float mat-label.
361+
// If single select with value, with an option label or html, float mat-label to avoid
362+
// it overlapping with select content.
363+
const selectElement = this._elementRef.nativeElement;
364+
return selectElement.multiple || !this.empty || selectElement.options[0].label ||
365+
this.focused;
365366
} else {
366367
return this.focused || !this.empty;
367368
}

‎src/lib/select/select.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ Angular Material also supports use of native `<select>` element inside of
1313
and usability advantages. See [the documentation for
1414
form-field](https://material.angular.io/components/form-field) for more information.
1515

16-
To use native select inside `<mat-form-field>`, add `matInput` as an attribute to native html select.
16+
To use native select inside `<mat-form-field>`, add `matNativeControl` as an attribute to native html select.
1717

1818
<!-- example(select-overview) -->
1919

@@ -144,7 +144,7 @@ The `<mat-select>` component without text or label should be given a meaningful
144144

145145
The `<mat-select>` component has `role="listbox"` and options inside select have `role="option"`.
146146

147-
The `<select>` offers better accessibility by supporting all the native html accessibility capability.
147+
The native `<select>` offers the best accessibility because it is supported directly by screen-readers.
148148

149149
### Troubleshooting
150150

‎src/material-examples/select-disabled/select-disabled-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h4>mat-select</h4>
1313

1414
<h4>native html select</h4>
1515
<mat-form-field>
16-
<select matControl placeholder="Choose an option" [disabled]="disableSelect.value">
16+
<select matNativeControl placeholder="Choose an option" [disabled]="disableSelect.value">
1717
<option value="" disabled selected></option>
1818
<option value="volvo">Volvo</option>
1919
<option value="saab" disabled>Saab</option>

‎src/material-examples/select-error-state-matcher/select-error-state-matcher-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h4>mat-select</h4>
1414

1515
<h4>native html select</h4>
1616
<mat-form-field class="demo-full-width">
17-
<select matControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
17+
<select matNativeControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
1818
<option value=""></option>
1919
<option value="valid" selected>Valid option</option>
2020
<option value="invalid">Invalid option</option>

‎src/material-examples/select-form/select-form-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h4>mat-select</h4>
1010
<p> Selected food: {{selectedValue}} </p>
1111
<h4>native html select</h4>
1212
<mat-form-field>
13-
<select matControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
13+
<select matNativeControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
1414
<option value="" disabled selected></option>
1515
<option *ngFor="let car of cars" [value]="car.value">
1616
{{car.viewValue}}

‎src/material-examples/select-hint-error/select-hint-error-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h4>mat select</h4>
1313
<h4>native html select</h4>
1414
<mat-form-field>
1515
<mat-label>Select your car (required)</mat-label>
16-
<select matControl required [formControl]="selectFormControl">
16+
<select matNativeControl required [formControl]="selectFormControl">
1717
<option label="--select something --"></option>
1818
<option value="saab">Saab</option>
1919
<option value="mercedes">Mercedes</option>

‎src/material-examples/select-optgroup/select-optgroup-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h4>mat-select</h4>
1313

1414
<h4>native html select</h4>
1515
<mat-form-field>
16-
<select matControl>
16+
<select matNativeControl>
1717
<optgroup label="Swedish Cars">
1818
<option value="volvo">volvo</option>
1919
<option value="saab">Saab</option>

‎src/material-examples/select-overview/select-overview-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h4>Basic mat-select</h4>
99

1010
<h4>Basic native select</h4>
1111
<mat-form-field>
12-
<select matControl required>
12+
<select matNativeControl required>
1313
<option value="volvo">Volvo</option>
1414
<option value="saab">Saab</option>
1515
<option value="mercedes">Mercedes</option>

‎src/material-examples/select-reset/select-reset-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h4>mat-select</h4>
99
<h4>native html select</h4>
1010
<mat-form-field>
1111
<mat-label>Select your car</mat-label>
12-
<select matControl id="mySelectId">
12+
<select matNativeControl id="mySelectId">
1313
<option value="" disabled selected></option>
1414
<option value="volvo">Volvo</option>
1515
<option value="saab">Saab</option>

0 commit comments

Comments
 (0)