Skip to content

Commit a409c67

Browse files
idzarkidzark
committed
Release 2.2.0
1 parent 7ff131b commit a409c67

File tree

8 files changed

+167
-37
lines changed

8 files changed

+167
-37
lines changed

‎CHANGELOG.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
## 2.2.0 (16.05.2022)
2+
3+
### Fixes and improvements:
4+
5+
- Datepicker - resolved problem with returned month value when `m` format is used,
6+
- Treeview - resolved problem with `(selected)` event emit when selecting checkbox,
7+
- Select - resolved problem with keyboard navigation and option highlight after filter input is used.
8+
- Charts - resolved problem with chart options being overriden by options defined for other charts,
9+
- Range - resolved problem with thumb position update after change in `ngModel` or `formControl`
10+
11+
### New:
12+
13+
- [Added filter plugin](https://mdbootstrap.com/docs/b5/angular/plugins/filters/)
14+
- Dropdown - added keyboard navigation
15+
16+
---
17+
118
## 2.1.0 (11.04.2022)
219

320
### Fixes and improvements:
@@ -14,6 +31,8 @@
1431
- [Mention](https://mdbootstrap.com/docs/b5/angular/plugins/mention/)
1532
- [Transfer](https://mdbootstrap.com/docs/b5/angular/plugins/transfer/)
1633

34+
---
35+
1736
## 2.0.0 (28.02.2022)
1837

1938
### Breaking changes:

‎README.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MDB 5 Angular
22

3-
Version: FREE 2.1.0
3+
Version: FREE 2.2.0
44

55
Documentation:
66
https://mdbootstrap.com/docs/b5/angular/

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mdb-angular-ui-kit-free",
3-
"version": "2.1.0",
3+
"version": "2.2.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "ng serve",

‎projects/mdb-angular-ui-kit/CHANGELOG.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
## 2.2.0 (16.05.2022)
2+
3+
### Fixes and improvements:
4+
5+
- Datepicker - resolved problem with returned month value when `m` format is used,
6+
- Treeview - resolved problem with `(selected)` event emit when selecting checkbox,
7+
- Select - resolved problem with keyboard navigation and option highlight after filter input is used.
8+
- Charts - resolved problem with chart options being overriden by options defined for other charts,
9+
- Range - resolved problem with thumb position update after change in `ngModel` or `formControl`
10+
11+
### New:
12+
13+
- [Added filter plugin](https://mdbootstrap.com/docs/b5/angular/plugins/filters/)
14+
- Dropdown - added keyboard navigation
15+
16+
---
17+
118
## 2.1.0 (11.04.2022)
219

320
### Fixes and improvements:
@@ -14,6 +31,8 @@
1431
- [Mention](https://mdbootstrap.com/docs/b5/angular/plugins/mention/)
1532
- [Transfer](https://mdbootstrap.com/docs/b5/angular/plugins/transfer/)
1633

34+
---
35+
1736
## 2.0.0 (28.02.2022)
1837

1938
### Breaking changes:

‎projects/mdb-angular-ui-kit/dropdown/dropdown.directive.spec.ts‎

Lines changed: 82 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,46 @@
11
import { ComponentFixture, fakeAsync, flush, inject, TestBed } from '@angular/core/testing';
2-
import { Component, DebugElement } from '@angular/core';
2+
import { Component, DebugElement, Directive } from '@angular/core';
33
import { MdbDropdownModule } from './index';
44
import { MdbDropdownDirective } from './index';
55
import { By } from '@angular/platform-browser';
66
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
77
import { OverlayContainer } from '@angular/cdk/overlay';
88

99
describe('MDB Dropdown', () => {
10-
describe('after init', () => {
11-
let fixture: ComponentFixture<TestDropdownComponent>;
12-
let element: any;
13-
let component: TestDropdownComponent;
14-
let directive: any;
15-
let debugElement: DebugElement;
16-
let overlayContainer: OverlayContainer;
17-
let overlayContainerElement: HTMLElement;
18-
19-
beforeEach(async () => {
20-
await TestBed.configureTestingModule({
21-
imports: [MdbDropdownModule, NoopAnimationsModule],
22-
declarations: [TestDropdownComponent],
23-
teardown: { destroyAfterEach: false },
24-
});
25-
26-
inject([OverlayContainer], (container: OverlayContainer) => {
27-
overlayContainer = container;
28-
overlayContainerElement = container.getContainerElement();
29-
})();
30-
31-
fixture = TestBed.createComponent(TestDropdownComponent);
32-
component = fixture.componentInstance;
33-
element = fixture.nativeElement;
34-
debugElement = fixture.debugElement;
35-
36-
fixture.detectChanges();
10+
let fixture: ComponentFixture<TestDropdownComponent>;
11+
let element: any;
12+
let component: TestDropdownComponent;
13+
let directive: any;
14+
let debugElement: DebugElement;
15+
let overlayContainer: OverlayContainer;
16+
let overlayContainerElement: HTMLElement;
17+
18+
beforeEach(async () => {
19+
await TestBed.configureTestingModule({
20+
imports: [MdbDropdownModule, NoopAnimationsModule],
21+
declarations: [TestDropdownComponent],
22+
teardown: { destroyAfterEach: false },
3723
});
3824

39-
afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
40-
currentOverlayContainer.ngOnDestroy();
41-
overlayContainer.ngOnDestroy();
42-
}));
25+
inject([OverlayContainer], (container: OverlayContainer) => {
26+
overlayContainer = container;
27+
overlayContainerElement = container.getContainerElement();
28+
})();
29+
30+
fixture = TestBed.createComponent(TestDropdownComponent);
31+
component = fixture.componentInstance;
32+
element = fixture.nativeElement;
33+
debugElement = fixture.debugElement;
4334

35+
fixture.detectChanges();
36+
});
37+
38+
afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
39+
currentOverlayContainer.ngOnDestroy();
40+
overlayContainer.ngOnDestroy();
41+
}));
42+
43+
describe('after init', () => {
4444
it('should create the component', () => {
4545
expect(component).toBeTruthy();
4646
});
@@ -151,6 +151,54 @@ describe('MDB Dropdown', () => {
151151
expect(directive._xPosition).toBe('end');
152152
});
153153
});
154+
155+
describe('Keyboard navigation', () => {
156+
it('should correctly focus dropdown items when ArrowUp or ArrowDown key is used', fakeAsync(() => {
157+
directive = fixture.debugElement
158+
.query(By.directive(MdbDropdownDirective))
159+
.injector.get(MdbDropdownDirective) as MdbDropdownDirective;
160+
161+
directive.show();
162+
fixture.detectChanges();
163+
flush();
164+
165+
const menu = document.querySelector('.dropdown-menu');
166+
const items = menu.querySelectorAll('.dropdown-item');
167+
168+
document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
169+
fixture.detectChanges();
170+
171+
expect(document.activeElement).toBe(items[0]);
172+
173+
document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
174+
fixture.detectChanges();
175+
176+
expect(document.activeElement).toBe(items[1]);
177+
178+
document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
179+
fixture.detectChanges();
180+
181+
expect(document.activeElement).toBe(items[0]);
182+
}));
183+
184+
it('should focus last option if ArrowUp is used and no item is selected', fakeAsync(() => {
185+
directive = fixture.debugElement
186+
.query(By.directive(MdbDropdownDirective))
187+
.injector.get(MdbDropdownDirective) as MdbDropdownDirective;
188+
189+
directive.show();
190+
fixture.detectChanges();
191+
flush();
192+
193+
const menu = document.querySelector('.dropdown-menu');
194+
const items = menu.querySelectorAll('.dropdown-item');
195+
196+
document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
197+
fixture.detectChanges();
198+
199+
expect(document.activeElement).toBe(items[items.length - 1]);
200+
}));
201+
});
154202
});
155203

156204
@Component({
@@ -165,6 +213,8 @@ describe('MDB Dropdown', () => {
165213
aria-labelledby="dropdownMenuButton"
166214
>
167215
<li><a class="dropdown-item" href="#">Action</a></li>
216+
<li><a class="dropdown-item" href="#">Another action</a></li>
217+
<li><a class="dropdown-item" href="#">Something else here</a></li>
168218
</ul>
169219
</div>
170220
`,

‎projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
Component,
66
ElementRef,
77
EventEmitter,
8-
HostListener,
98
Input,
109
OnDestroy,
1110
Output,
@@ -325,6 +324,13 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
325324
}
326325
});
327326

327+
this._overlayRef
328+
.keydownEvents()
329+
.pipe(takeUntil(this._overlayRef.detachments()))
330+
.subscribe((event: KeyboardEvent) => {
331+
this._handleKeyboardNavigation(event);
332+
});
333+
328334
this._listenToClick(this._overlayRef, this._dropdownToggle.nativeElement).subscribe((event) => {
329335
const target = event.target as HTMLElement;
330336
const isDropdownItem = target.classList && target.classList.contains('dropdown-item');
@@ -342,6 +348,43 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
342348
this._animationState = 'visible';
343349
}
344350

351+
private _handleKeyboardNavigation(event: KeyboardEvent) {
352+
const items: HTMLElement[] = Array.from(
353+
this._dropdownMenu.nativeElement.querySelectorAll('.dropdown-item')
354+
);
355+
const key = event.key;
356+
const activeElement = this._dropdownMenu.nativeElement.ownerDocument.activeElement;
357+
358+
if (items.length === 0) {
359+
return;
360+
}
361+
362+
let index = items.indexOf(activeElement);
363+
364+
switch (key) {
365+
case 'ArrowDown':
366+
event.preventDefault();
367+
368+
index = Math.min(index + 1, items.length - 1);
369+
break;
370+
case 'ArrowUp':
371+
event.preventDefault();
372+
373+
if (index === -1) {
374+
index = items.length - 1;
375+
break;
376+
}
377+
index = Math.max(index - 1, 0);
378+
break;
379+
}
380+
381+
const nextActiveElement: HTMLElement = items[index];
382+
383+
if (nextActiveElement) {
384+
nextActiveElement.focus();
385+
}
386+
}
387+
345388
hide(): void {
346389
this._cdRef.markForCheck();
347390

‎projects/mdb-angular-ui-kit/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"homepage": "https://mdbootstrap.com/docs/b5/angular/",
55
"author": "MDBootstrap",
66
"license": "MIT",
7-
"version": "2.1.0",
7+
"version": "2.2.0",
88
"peerDependencies": {
99
"@angular/common": "^13.0.0",
1010
"@angular/core": "^13.0.0",

‎projects/mdb-angular-ui-kit/range/range.component.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
[max]="max"
1111
[step]="step"
1212
[value]="value"
13-
[(ngModel)]="value"
1413
class="form-range"
1514
min="0"
1615
max="5"

0 commit comments

Comments
 (0)