@@ -48,7 +48,8 @@ describe('MdAutocomplete', () => {
48
48
AutocompleteWithoutForms ,
49
49
NgIfAutocomplete ,
50
50
AutocompleteWithNgModel ,
51
- AutocompleteWithOnPushDelay
51
+ AutocompleteWithOnPushDelay ,
52
+ AutocompleteWithNativeInput
52
53
] ,
53
54
providers : [
54
55
{ provide : OverlayContainer , useFactory : ( ) => {
@@ -1065,6 +1066,24 @@ describe('MdAutocomplete', () => {
1065
1066
} ) ) ;
1066
1067
} ) ;
1067
1068
1069
+ describe ( 'without mdInput' , ( ) => {
1070
+ let fixture : ComponentFixture < AutocompleteWithNativeInput > ;
1071
+
1072
+ beforeEach ( ( ) => {
1073
+ fixture = TestBed . createComponent ( AutocompleteWithNativeInput ) ;
1074
+ fixture . detectChanges ( ) ;
1075
+ } ) ;
1076
+
1077
+ it ( 'should not throw when clicking outside' , async ( ( ) => {
1078
+ dispatchFakeEvent ( fixture . debugElement . query ( By . css ( 'input' ) ) . nativeElement , 'focus' ) ;
1079
+ fixture . detectChanges ( ) ;
1080
+
1081
+ fixture . whenStable ( ) . then ( ( ) => {
1082
+ expect ( ( ) => dispatchFakeEvent ( document , 'click' ) ) . not . toThrow ( ) ;
1083
+ } ) ;
1084
+ } ) ) ;
1085
+ } ) ;
1086
+
1068
1087
describe ( 'misc' , ( ) => {
1069
1088
1070
1089
it ( 'should allow basic use without any forms directives' , ( ) => {
@@ -1373,6 +1392,33 @@ class AutocompleteWithOnPushDelay implements OnInit {
1373
1392
}
1374
1393
}
1375
1394
1395
+ @Component ( {
1396
+ template : `
1397
+ <input placeholder="Choose" [mdAutocomplete]="auto" [formControl]="optionCtrl">
1398
+
1399
+ <md-autocomplete #auto="mdAutocomplete">
1400
+ <md-option *ngFor="let option of filteredOptions | async" [value]="option">
1401
+ {{option}}
1402
+ </md-option>
1403
+ </md-autocomplete>
1404
+ `
1405
+ } )
1406
+ class AutocompleteWithNativeInput {
1407
+ optionCtrl = new FormControl ( ) ;
1408
+ filteredOptions : Observable < any > ;
1409
+ options = [ 'En' , 'To' , 'Tre' , 'Fire' , 'Fem' ] ;
1410
+
1411
+ @ViewChild ( MdAutocompleteTrigger ) trigger : MdAutocompleteTrigger ;
1412
+ @ViewChildren ( MdOption ) mdOptions : QueryList < MdOption > ;
1413
+
1414
+ constructor ( ) {
1415
+ this . filteredOptions = this . optionCtrl . valueChanges . startWith ( null ) . map ( ( val ) => {
1416
+ return val ? this . options . filter ( option => new RegExp ( val , 'gi' ) . test ( option ) )
1417
+ : this . options . slice ( ) ;
1418
+ } ) ;
1419
+ }
1420
+ }
1421
+
1376
1422
1377
1423
/** This is a mock keyboard event to test keyboard events in the autocomplete. */
1378
1424
class MockKeyboardEvent {
0 commit comments