skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(autocomplete): reopening when clicking an option in IE (#5172)

Browse Source 
Fixes an issue that caused IE to reopen the autocomplete panel if the user clicks to select an item. It seems that IE can delay refocusing the input after the panel has been closed, which causes the focus handler to reopen it.

Fixes #5165.
This commit is contained in:
Kristiyan Kostadinov
2017-06-22 19:10:01 +02:00
committed by Jeremy Elbourn
parent bdf028646f
commit fe3121024c
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/autocomplete/autocomplete-trigger.ts
+6 -4
View File
@@ -64,13 +64,13 @@ export const MD_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
*/
export function getMdAutocompleteMissingPanelError(): Error {
return Error('Attempting to open an undefined instance of `md-autocomplete`. ' +
'Make sure that the id passed to the `mdAutocomplete` is correct and that ' +
'you\'re attempting to open it after the ngAfterContentInit hook.');
'Make sure that the id passed to the `mdAutocomplete` is correct and that ' +
'you\'re attempting to open it after the ngAfterContentInit hook.');
}
@Directive({
selector: 'input[mdAutocomplete], input[matAutocomplete],' +
'textarea[mdAutocomplete], textarea[matAutocomplete]',
'textarea[mdAutocomplete], textarea[matAutocomplete]',
host: {
'role': 'combobox',
'autocomplete': 'off',
@@ -79,7 +79,9 @@ export function getMdAutocompleteMissingPanelError(): Error {
'[attr.aria-activedescendant]': 'activeOption?.id',
'[attr.aria-expanded]': 'panelOpen.toString()',
'[attr.aria-owns]': 'autocomplete?.id',
'(focus)': 'openPanel()',
// Note: we use `focusin`, as opposed to `focus`, in order to open the panel
// a little earlier. This avoids issues where IE delays the focusing of the input.
'(focusin)': 'openPanel()',
'(input)': '_handleInput($event)',
'(blur)': '_onTouched()',
'(keydown)': '_handleKeydown($event)',
src/lib/autocomplete/autocomplete.spec.ts
+7 -7
View File
@@ -101,7 +101,7 @@ describe('MdAutocomplete', () => {
expect(fixture.componentInstance.trigger.panelOpen)
.toBe(false, `Expected panel state to start out closed.`);
dispatchFakeEvent(input, 'focus');
dispatchFakeEvent(input, 'focusin');
fixture.whenStable().then(() => {
fixture.detectChanges();
@@ -147,7 +147,7 @@ describe('MdAutocomplete', () => {
}));
it('should close the panel when input loses focus', async(() => {
dispatchFakeEvent(input, 'focus');
dispatchFakeEvent(input, 'focusin');
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -161,7 +161,7 @@ describe('MdAutocomplete', () => {
}));
it('should close the panel when an option is clicked', async(() => {
dispatchFakeEvent(input, 'focus');
dispatchFakeEvent(input, 'focusin');
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -177,7 +177,7 @@ describe('MdAutocomplete', () => {
}));
it('should close the panel when a newly created option is clicked', async(() => {
dispatchFakeEvent(input, 'focus');
dispatchFakeEvent(input, 'focusin');
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -222,7 +222,7 @@ describe('MdAutocomplete', () => {
});
it('should hide the panel when the options list is empty', async(() => {
dispatchFakeEvent(input, 'focus');
dispatchFakeEvent(input, 'focusin');
fixture.whenStable().then(() => {
fixture.detectChanges();
@@ -1127,7 +1127,7 @@ describe('MdAutocomplete', () => {
fixture.detectChanges();
const input = fixture.debugElement.query(By.css('input')).nativeElement;
dispatchFakeEvent(input, 'focus');
dispatchFakeEvent(input, 'focusin');
fixture.whenStable().then(() => {
fixture.detectChanges();
@@ -1226,7 +1226,7 @@ describe('MdAutocomplete', () => {
let fixture = TestBed.createComponent(AutocompleteWithOnPushDelay);
fixture.detectChanges();
dispatchFakeEvent(fixture.debugElement.query(By.css('input')).nativeElement, 'focus');
dispatchFakeEvent(fixture.debugElement.query(By.css('input')).nativeElement, 'focusin');
tick(1000);
fixture.detectChanges();