Skip to content

Commit

Permalink
refactor: use single input to control open/close
Browse files Browse the repository at this point in the history
  • Loading branch information
@varnastadeus
varnastadeus committed Jun 18, 2018
1 parent ab6c388 commit 5aff41b
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 53 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Expand Up @@ -132,7 +132,7 @@ map: {
| loadingText | `string` | `Loading...` | no | Set custom text when for loading items |
| labelForId | `string` | `-` | no | Id to associate control with label. |
| [markFirst] | `boolean` | `true` | no | Marks first item as focused when opening/filtering. |
| [isOpen] | `boolean` | `-` | no | Allows to control whether dropdown should open or close. `True` - won't close. `False` - won't open. |
| [isOpen] | `boolean` | `-` | no | Allows manual control of dropdown opening and closing. `True` - won't close. `False` - won't open. |
| maxSelectedItems | `number` | none | no | When multiple = true, allows to set a limit number of selection. |
| [hideSelected] | `boolean` | `false` | no | Allows to hide selected items. |
| [multiple] | `boolean` | `false` | no | Allows to select multiple items. |
Expand Down
8 changes: 4 additions & 4 deletions src/ng-select/ng-select.component.html
View file
Expand Up @@ -34,9 +34,9 @@
(blur)="onInputBlur()"
(change)="$event.stopPropagation()"
role="combobox"
[attr.aria-expanded]="opened"
[attr.aria-owns]="opened ? dropdownId : null"
[attr.aria-activedescendant]="opened ? itemsList?.markedItem?.htmlId : null">
[attr.aria-expanded]="isOpen"
[attr.aria-owns]="isOpen ? dropdownId : null"
[attr.aria-activedescendant]="isOpen ? itemsList?.markedItem?.htmlId : null">
</div>
</div>

Expand All @@ -51,7 +51,7 @@
</span>
</div>

<ng-dropdown-panel *ngIf="opened"
<ng-dropdown-panel *ngIf="isOpen"
class="ng-dropdown-panel"
[virtualScroll]="virtualScroll"
[bufferAmount]="bufferAmount"
Expand Down
58 changes: 29 additions & 29 deletions src/ng-select/ng-select.component.spec.ts
View file
Expand Up @@ -924,7 +924,7 @@ describe('NgSelectComponent', function () {
fixture.detectChanges();

fixture.whenStable().then(() => {
expect(fixture.componentInstance.select.opened).toBeFalsy();
expect(fixture.componentInstance.select.isOpen).toBeFalsy();
})
}));

Expand All @@ -941,7 +941,7 @@ describe('NgSelectComponent', function () {
fixture.detectChanges();

fixture.whenStable().then(() => {
expect(fixture.componentInstance.select.opened).toBeTruthy();
expect(fixture.componentInstance.select.isOpen).toBeTruthy();
})
}));

Expand All @@ -957,7 +957,7 @@ describe('NgSelectComponent', function () {
selectOption(fixture, KeyCode.ArrowDown, 0);
tickAndDetectChanges(fixture);

expect(fixture.componentInstance.select.opened).toBeTruthy();
expect(fixture.componentInstance.select.isOpen).toBeTruthy();
}));
});

Expand All @@ -981,13 +981,13 @@ describe('NgSelectComponent', function () {
describe('space', () => {
it('should open dropdown', () => {
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
expect(select.opened).toBe(true);
expect(select.isOpen).toBe(true);
});

it('should not open dropdown when isOpen is false', () => {
select.isOpen = false;
select.ngOnChanges(<any>{ isOpen: { currentValue: false }});
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
expect(select.opened).toBeFalsy();
expect(select.isOpen).toBeFalsy();
});

it('should open empty dropdown if no items', fakeAsync(() => {
Expand Down Expand Up @@ -1095,9 +1095,9 @@ describe('NgSelectComponent', function () {

describe('esc', () => {
it('should close opened dropdown', () => {
select.opened = true;
select.isOpen = true;
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Esc);
expect(select.opened).toBe(false);
expect(select.isOpen).toBe(false);
});
});

Expand All @@ -1107,7 +1107,7 @@ describe('NgSelectComponent', function () {
tick(200);
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Tab);
expect(select.opened).toBeFalsy()
expect(select.isOpen).toBeFalsy()
}));

it('should close dropdown when [selectOnTab]="false"', fakeAsync(() => {
Expand All @@ -1116,7 +1116,7 @@ describe('NgSelectComponent', function () {
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Tab);
expect(select.selectedItems).toEqual([]);
expect(select.opened).toBeFalsy();
expect(select.isOpen).toBeFalsy();
}));

it('should close dropdown and keep selected value', fakeAsync(() => {
Expand All @@ -1129,7 +1129,7 @@ describe('NgSelectComponent', function () {
value: fixture.componentInstance.cities[0]
})];
expect(select.selectedItems).toEqual(result);
expect(select.opened).toBeFalsy()
expect(select.isOpen).toBeFalsy()
}));

it('should mark first item on filter when tab', fakeAsync(() => {
Expand Down Expand Up @@ -1230,14 +1230,14 @@ describe('NgSelectComponent', function () {
describe('enter', () => {
it('should open dropdown when it is closed', () => {
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Enter);
expect(select.opened).toBe(true);
expect(select.isOpen).toBe(true);
});

it('should select option and close dropdown', () => {
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Enter);
expect(select.selectedItems[0].value).toEqual(fixture.componentInstance.cities[0]);
expect(select.opened).toBe(false);
expect(select.isOpen).toBe(false);
});
});
});
Expand All @@ -1261,22 +1261,22 @@ describe('NgSelectComponent', function () {

it('should close dropdown if opened and clicked outside dropdown container', fakeAsync(() => {
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
expect(fixture.componentInstance.select.opened).toBeTruthy();
expect(fixture.componentInstance.select.isOpen).toBeTruthy();
document.getElementById('outside').click();
let event = new MouseEvent('mousedown', { bubbles: true });
document.getElementById('outside').dispatchEvent(event);
tickAndDetectChanges(fixture);
expect(fixture.componentInstance.select.opened).toBeFalsy();
expect(fixture.componentInstance.select.isOpen).toBeFalsy();
}));

it('should prevent dropdown close if clicked on select', fakeAsync(() => {
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
expect(select.opened).toBeTruthy();
expect(select.isOpen).toBeTruthy();
document.getElementById('select').click();
let event = new MouseEvent('mousedown', { bubbles: true });
document.getElementById('select').dispatchEvent(event);
tickAndDetectChanges(fixture);
expect(select.opened).toBeTruthy();
expect(select.isOpen).toBeTruthy();
}));

});
Expand Down Expand Up @@ -1618,7 +1618,7 @@ describe('NgSelectComponent', function () {
tickAndDetectChanges(fixture);
clickArrow();
tickAndDetectChanges(fixture);
expect(fixture.componentInstance.select.opened).toBe(false);
expect(fixture.componentInstance.select.isOpen).toBe(false);
expect((<NgOption[]>fixture.componentInstance.select.selectedItems).length).toBe(2);
}));
});
Expand All @@ -1636,7 +1636,7 @@ describe('NgSelectComponent', function () {
selectOption(fixture, KeyCode.ArrowDown, 1);
expect(select.selectedItems.length).toBe(3);
expect(select.itemsList.filteredItems.length).toBe(0);
expect(select.opened).toBeFalsy();
expect(select.isOpen).toBeFalsy();
}));

it('should not open dropdown when all items are selected', fakeAsync(() => {
Expand All @@ -1645,15 +1645,15 @@ describe('NgSelectComponent', function () {
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
expect(select.selectedItems.length).toBe(3);
expect(select.itemsList.filteredItems.length).toBe(0);
expect(select.opened).toBeFalsy();
expect(select.isOpen).toBeFalsy();
}));

it('should open dropdown when all items are selected and tagging is enabled', fakeAsync(() => {
select.addTag = true;
fixture.componentInstance.cities = [];
tickAndDetectChanges(fixture);
triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
expect(select.opened).toBeTruthy();
expect(select.isOpen).toBeTruthy();
}));

it('should not insert option back to list if it is newly created option', fakeAsync(() => {
Expand Down Expand Up @@ -1941,12 +1941,12 @@ describe('NgSelectComponent', function () {
// open
selectInput.triggerEventHandler('mousedown', createEvent({ target: { className: '' } }));
tickAndDetectChanges(fixture);
expect(fixture.componentInstance.select.opened).toBe(true);
expect(fixture.componentInstance.select.isOpen).toBe(true);

// close
selectInput.triggerEventHandler('mousedown', createEvent({ target: { className: '' } }));
tickAndDetectChanges(fixture);
expect(fixture.componentInstance.select.opened).toBe(false);
expect(fixture.componentInstance.select.isOpen).toBe(false);
}));

it('should not filter when searchable false', fakeAsync(() => {
Expand Down Expand Up @@ -2197,7 +2197,7 @@ describe('NgSelectComponent', function () {
tickAndDetectChanges(fixture);
fixture.componentInstance.filter.subscribe();
fixture.componentInstance.select.open();
expect(fixture.componentInstance.select.opened).toBeTruthy();
expect(fixture.componentInstance.select.isOpen).toBeTruthy();
}));
});

Expand Down Expand Up @@ -2538,7 +2538,7 @@ describe('NgSelectComponent', function () {
it('should not open dropdown', fakeAsync(() => {
triggerMousedown();
tickAndDetectChanges(fixture);
expect(fixture.componentInstance.select.opened).toBe(false);
expect(fixture.componentInstance.select.isOpen).toBe(false);
}));

it('clear button should not appear if select is disabled', fakeAsync(() => {
Expand Down Expand Up @@ -2573,7 +2573,7 @@ describe('NgSelectComponent', function () {
it('should not open dropdown', fakeAsync(() => {
triggerMousedown();
tickAndDetectChanges(fixture);
expect(select.opened).toBe(false);
expect(select.isOpen).toBe(false);
}));

it('should focus dropdown', fakeAsync(() => {
Expand Down Expand Up @@ -2605,17 +2605,17 @@ describe('NgSelectComponent', function () {
// open
triggerMousedown();
tickAndDetectChanges(fixture);
expect(fixture.componentInstance.select.opened).toBe(true);
expect(fixture.componentInstance.select.isOpen).toBe(true);

// close
triggerMousedown();
tickAndDetectChanges(fixture);
expect(fixture.componentInstance.select.opened).toBe(false);
expect(fixture.componentInstance.select.isOpen).toBe(false);

// open
triggerMousedown();
tickAndDetectChanges(fixture);
expect(fixture.componentInstance.select.opened).toBe(true);
expect(fixture.componentInstance.select.isOpen).toBe(true);
}));
});
});
Expand Down

0 comments on commit 5aff41b

Please sign in to comment.