Skip to content

Commit

Permalink
update: change using KeyboardEvent.keyCode to KeyboardEvent.code - #33
Browse files Browse the repository at this point in the history 
reason: deprecated code - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
  • Loading branch information
@optimistex
optimistex committed Apr 3, 2018
1 parent 36dabef commit 9289d4b
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 48 deletions.
54 changes: 27 additions & 27 deletions src/app/lib/ngx-select/ngx-select.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,10 @@ const items2 = [
{uuid: 'uuid-10', name: 'v10'}
];

const createKeyboardEvent = (typeArg: string, keyCode: number, key: string = '') => {
const createKeyboardEvent = (typeArg: string, code: string) => {
const customEvent = new CustomEvent(typeArg, {bubbles: true, cancelable: true});
customEvent['keyCode'] = keyCode;
customEvent['key'] = key;
customEvent['code'] = code;
// customEvent['key'] = key;
return customEvent;
};

Expand Down Expand Up @@ -357,7 +357,7 @@ describe('NgxSelectComponent', () => {
});

it('by press button Escape', () => {
formControl(1).dispatchEvent(createKeyboardEvent('keyup', 27)); // key Escape
formControl(1).dispatchEvent(createKeyboardEvent('keyup', 'Escape'));
});

it('by open other menu', () => {
Expand Down Expand Up @@ -398,27 +398,27 @@ describe('NgxSelectComponent', () => {
});

it('activate last item by press the button arrow right', () => {
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 39)); // arrow right
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'ArrowRight'));
fixture.detectChanges();
expect(selectItemActive(1).innerHTML).toContain('item 100');
});

it('activate previous item by press the button arrow up', () => {
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 39)); // arrow right
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 38)); // arrow up
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'ArrowRight'));
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'ArrowUp'));
fixture.detectChanges();
expect(selectItemActive(1).innerHTML).toContain('item 99');
});

it('activate first item by press the button arrow left', () => {
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 39)); // arrow right
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 37)); // arrow left
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'ArrowRight'));
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'ArrowLeft'));
fixture.detectChanges();
expect(selectItemActive(1).innerHTML).toContain('item 1');
});

it('activate next item by press the button arrow down', () => {
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 40)); // arrow down
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'ArrowDown'));
fixture.detectChanges();
expect(selectItemActive(1).innerHTML).toContain('item 2');
});
Expand Down Expand Up @@ -447,8 +447,8 @@ describe('NgxSelectComponent', () => {
});

it('by press the key Enter on a choice item', () => {
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 40)); // arrow down
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 13)); // key Enter
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'ArrowDown'));
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'Enter'));
});

afterEach(() => {
Expand All @@ -473,8 +473,8 @@ describe('NgxSelectComponent', () => {
});

it('by press the key Enter on a choice item', () => {
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 40)); // arrow down
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 13)); // key Enter
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 'ArrowDown'));
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 'Enter'));
});

afterEach(() => {
Expand Down Expand Up @@ -503,14 +503,14 @@ describe('NgxSelectComponent', () => {
});

it('by press the key Enter on choice items', () => {
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 40)); // arrow down
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 13)); // key Enter
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'ArrowDown'));
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'Enter'));
fixture.detectChanges();
formControl(1).click();
fixture.detectChanges();
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 40)); // arrow down
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 40)); // arrow down
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 13)); // key Enter
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'ArrowDown'));
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'ArrowDown'));
formControlInput(1).dispatchEvent(createKeyboardEvent('keydown', 'Enter'));
});

afterEach(() => {
Expand Down Expand Up @@ -541,14 +541,14 @@ describe('NgxSelectComponent', () => {
});

it('by press the key Enter on choice items', () => {
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 40)); // arrow down
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 13)); // key Enter
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 'ArrowDown'));
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 'Enter'));
fixture.detectChanges();
formControl(2).click();
fixture.detectChanges();
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 40)); // arrow down
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 40)); // arrow down
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 13)); // key Enter
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 'ArrowDown'));
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 'ArrowDown'));
formControlInput(2).dispatchEvent(createKeyboardEvent('keydown', 'Enter'));
});

afterEach(() => {
Expand Down Expand Up @@ -675,7 +675,7 @@ describe('NgxSelectComponent', () => {
formControl(1).click();
fixture.detectChanges();
formControlInput(1).value = 'br';
formControlInput(1).dispatchEvent(createKeyboardEvent('input', 82, 'r'));
formControlInput(1).dispatchEvent(createKeyboardEvent('input', 'keyR'));
fixture.detectChanges();
expect(selectItemList(1).length).toBe(3);
});
Expand All @@ -686,7 +686,7 @@ describe('NgxSelectComponent', () => {
formControl(1).click();
fixture.detectChanges();
formControlInput(1).value = 'br';
formControlInput(1).dispatchEvent(createKeyboardEvent('input', 82, 'r'));
formControlInput(1).dispatchEvent(createKeyboardEvent('input', 'keyR'));
fixture.detectChanges();
fixture.componentInstance.select1.items = items;
fixture.detectChanges();
Expand All @@ -702,7 +702,7 @@ describe('NgxSelectComponent', () => {
formControl(1).click();
fixture.detectChanges();
formControlInput(1).value = 'br';
formControlInput(1).dispatchEvent(createKeyboardEvent('input', 82, 'r'));
formControlInput(1).dispatchEvent(createKeyboardEvent('input', 'keyR'));
fixture.detectChanges();
expect(selectItemList(1).length).toBe(3);
});
Expand Down
27 changes: 14 additions & 13 deletions src/app/lib/ngx-select/ngx-select.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,14 @@ export class NgxSelectComponent implements INgxSelectOptions, ControlValueAccess
@Input() public noResultsFound = 'No results found';
@Input() public size: 'small' | 'default' | 'large' = 'default';
@Input() public searchCallback: (search: string, item: INgxSelectOption) => boolean;
public keyCodeToRemoveSelected = 46;
public keyCodeToOptionsOpen = 13;
public keyCodeToOptionsClose = 27;
public keyCodeToOptionsSelect = 13;
public keyCodeToNavigateFirst = 37;
public keyCodeToNavigatePrevious = 38;
public keyCodeToNavigateNext = 40;
public keyCodeToNavigateLast = 39;
public keyCodeToRemoveSelected = 'Delete';
public keyCodeToOptionsOpen = 'Enter';
public keyCodeToOptionsClose = 'Escape';
public keyCodeToOptionsSelect = 'Enter';
public keyCodeToNavigateFirst = 'ArrowLeft';
public keyCodeToNavigatePrevious = 'ArrowUp';
public keyCodeToNavigateNext = 'ArrowDown';
public keyCodeToNavigateLast = 'ArrowRight';

@Output() public typed = new EventEmitter<string>();
@Output() public focus = new EventEmitter<void>();
Expand Down Expand Up @@ -301,6 +301,7 @@ export class NgxSelectComponent implements INgxSelectOptions, ControlValueAccess
}

public inputKeyDown(event: KeyboardEvent) {
console.log(event.keyCode, event);
const keysForOpenedState = [
this.keyCodeToOptionsSelect,
this.keyCodeToNavigateFirst,
Expand All @@ -310,10 +311,10 @@ export class NgxSelectComponent implements INgxSelectOptions, ControlValueAccess
];
const keysForClosedState = [this.keyCodeToOptionsOpen, this.keyCodeToRemoveSelected];

if (this.optionsOpened && keysForOpenedState.indexOf(event.keyCode) !== -1) {
if (this.optionsOpened && keysForOpenedState.indexOf(event.code) !== -1) {
event.preventDefault();
event.stopPropagation();
switch (event.keyCode) {
switch (event.code) {
case this.keyCodeToOptionsSelect:
this.optionSelect(this.optionActive);
this.navigateOption(ENavigation.next);
Expand All @@ -331,10 +332,10 @@ export class NgxSelectComponent implements INgxSelectOptions, ControlValueAccess
this.navigateOption(ENavigation.next);
break;
}
} else if (!this.optionsOpened && keysForClosedState.indexOf(event.keyCode) !== -1) {
} else if (!this.optionsOpened && keysForClosedState.indexOf(event.code) !== -1) {
event.preventDefault();
event.stopPropagation();
switch (event.keyCode) {
switch (event.code) {
case this.keyCodeToOptionsOpen:
this.optionsOpen();
break;
Expand All @@ -346,7 +347,7 @@ export class NgxSelectComponent implements INgxSelectOptions, ControlValueAccess
}

public mainKeyUp(event: KeyboardEvent): void {
if (event.keyCode === this.keyCodeToOptionsClose) {
if (event.code === this.keyCodeToOptionsClose) {
this.optionsClose(true);
}
}
Expand Down
16 changes: 8 additions & 8 deletions src/app/lib/ngx-select/ngx-select.interfaces.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@ export interface INgxSelectOptions {
autoClearSearch?: boolean;
noResultsFound?: string;
size?: 'small' | 'default' | 'large';
keyCodeToRemoveSelected?: number;
keyCodeToOptionsOpen?: number;
keyCodeToOptionsClose?: number;
keyCodeToOptionsSelect?: number;
keyCodeToNavigateFirst?: number;
keyCodeToNavigatePrevious?: number;
keyCodeToNavigateNext?: number;
keyCodeToNavigateLast?: number;
keyCodeToRemoveSelected?: string;
keyCodeToOptionsOpen?: string;
keyCodeToOptionsClose?: string;
keyCodeToOptionsSelect?: string;
keyCodeToNavigateFirst?: string;
keyCodeToNavigatePrevious?: string;
keyCodeToNavigateNext?: string;
keyCodeToNavigateLast?: string;
}

0 comments on commit 9289d4b

Please sign in to comment.