Release 2.2.0

Author: idzark

CHANGELOG.md

@@ -1,3 +1,20 @@
+## 2.2.0 (16.05.2022)
+
+### Fixes and improvements:
+
+- Datepicker - resolved problem with returned month value when `m` format is used,
+- Treeview - resolved problem with `(selected)` event emit when selecting checkbox,
+- Select - resolved problem with keyboard navigation and option highlight after filter input is used.
+- Charts - resolved problem with chart options being overriden by options defined for other charts,
+- Range - resolved problem with thumb position update after change in `ngModel` or `formControl`
+
+### New:
+
+- [Added filter plugin](https://mdbootstrap.com/docs/b5/angular/plugins/filters/)
+- Dropdown - added keyboard navigation
+
+---
+
 ## 2.1.0 (11.04.2022)
 
 ### Fixes and improvements:
@@ -14,6 +31,8 @@
 - [Mention](https://mdbootstrap.com/docs/b5/angular/plugins/mention/)
 - [Transfer](https://mdbootstrap.com/docs/b5/angular/plugins/transfer/)
 
+---
+
 ## 2.0.0 (28.02.2022)
 
 ### Breaking changes:

README.txt

@@ -1,6 +1,6 @@
 MDB 5 Angular
 
-Version: FREE 2.1.0
+Version: FREE 2.2.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/angular/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-angular-ui-kit-free",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

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

@@ -1,3 +1,20 @@
+## 2.2.0 (16.05.2022)
+
+### Fixes and improvements:
+
+- Datepicker - resolved problem with returned month value when `m` format is used,
+- Treeview - resolved problem with `(selected)` event emit when selecting checkbox,
+- Select - resolved problem with keyboard navigation and option highlight after filter input is used.
+- Charts - resolved problem with chart options being overriden by options defined for other charts,
+- Range - resolved problem with thumb position update after change in `ngModel` or `formControl`
+
+### New:
+
+- [Added filter plugin](https://mdbootstrap.com/docs/b5/angular/plugins/filters/)
+- Dropdown - added keyboard navigation
+
+---
+
 ## 2.1.0 (11.04.2022)
 
 ### Fixes and improvements:
@@ -14,6 +31,8 @@
 - [Mention](https://mdbootstrap.com/docs/b5/angular/plugins/mention/)
 - [Transfer](https://mdbootstrap.com/docs/b5/angular/plugins/transfer/)
 
+---
+
 ## 2.0.0 (28.02.2022)
 
 ### Breaking changes:

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

@@ -1,46 +1,46 @@
 import { ComponentFixture, fakeAsync, flush, inject, TestBed } from '@angular/core/testing';
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, Directive } from '@angular/core';
 import { MdbDropdownModule } from './index';
 import { MdbDropdownDirective } from './index';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { OverlayContainer } from '@angular/cdk/overlay';
 
 describe('MDB Dropdown', () => {
-  describe('after init', () => {
-    let fixture: ComponentFixture<TestDropdownComponent>;
-    let element: any;
-    let component: TestDropdownComponent;
-    let directive: any;
-    let debugElement: DebugElement;
-    let overlayContainer: OverlayContainer;
-    let overlayContainerElement: HTMLElement;
-
-    beforeEach(async () => {
-      await TestBed.configureTestingModule({
-        imports: [MdbDropdownModule, NoopAnimationsModule],
-        declarations: [TestDropdownComponent],
-        teardown: { destroyAfterEach: false },
-      });
-
-      inject([OverlayContainer], (container: OverlayContainer) => {
-        overlayContainer = container;
-        overlayContainerElement = container.getContainerElement();
-      })();
-
-      fixture = TestBed.createComponent(TestDropdownComponent);
-      component = fixture.componentInstance;
-      element = fixture.nativeElement;
-      debugElement = fixture.debugElement;
-
-      fixture.detectChanges();
+  let fixture: ComponentFixture<TestDropdownComponent>;
+  let element: any;
+  let component: TestDropdownComponent;
+  let directive: any;
+  let debugElement: DebugElement;
+  let overlayContainer: OverlayContainer;
+  let overlayContainerElement: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MdbDropdownModule, NoopAnimationsModule],
+      declarations: [TestDropdownComponent],
+      teardown: { destroyAfterEach: false },
     });
 
-    afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
-      currentOverlayContainer.ngOnDestroy();
-      overlayContainer.ngOnDestroy();
-    }));
+    inject([OverlayContainer], (container: OverlayContainer) => {
+      overlayContainer = container;
+      overlayContainerElement = container.getContainerElement();
+    })();
+
+    fixture = TestBed.createComponent(TestDropdownComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+    debugElement = fixture.debugElement;
 
+    fixture.detectChanges();
+  });
+
+  afterEach(inject([OverlayContainer], (currentOverlayContainer: OverlayContainer) => {
+    currentOverlayContainer.ngOnDestroy();
+    overlayContainer.ngOnDestroy();
+  }));
+
+  describe('after init', () => {
     it('should create the component', () => {
       expect(component).toBeTruthy();
     });
@@ -151,6 +151,54 @@ describe('MDB Dropdown', () => {
       expect(directive._xPosition).toBe('end');
     });
   });
+
+  describe('Keyboard navigation', () => {
+    it('should correctly focus dropdown items when ArrowUp or ArrowDown key is used', fakeAsync(() => {
+      directive = fixture.debugElement
+        .query(By.directive(MdbDropdownDirective))
+        .injector.get(MdbDropdownDirective) as MdbDropdownDirective;
+
+      directive.show();
+      fixture.detectChanges();
+      flush();
+
+      const menu = document.querySelector('.dropdown-menu');
+      const items = menu.querySelectorAll('.dropdown-item');
+
+      document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(items[0]);
+
+      document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(items[1]);
+
+      document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(items[0]);
+    }));
+
+    it('should focus last option if ArrowUp is used and no item is selected', fakeAsync(() => {
+      directive = fixture.debugElement
+        .query(By.directive(MdbDropdownDirective))
+        .injector.get(MdbDropdownDirective) as MdbDropdownDirective;
+
+      directive.show();
+      fixture.detectChanges();
+      flush();
+
+      const menu = document.querySelector('.dropdown-menu');
+      const items = menu.querySelectorAll('.dropdown-item');
+
+      document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }));
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(items[items.length - 1]);
+    }));
+  });
 });
 
 @Component({
@@ -165,6 +213,8 @@ describe('MDB Dropdown', () => {
         aria-labelledby="dropdownMenuButton"
       >
         <li><a class="dropdown-item" href="#">Action</a></li>
+        <li><a class="dropdown-item" href="#">Another action</a></li>
+        <li><a class="dropdown-item" href="#">Something else here</a></li>
       </ul>
     </div>
   `,

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

@@ -5,7 +5,6 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  HostListener,
   Input,
   OnDestroy,
   Output,
@@ -325,6 +324,13 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
       }
     });
 
+    this._overlayRef
+      .keydownEvents()
+      .pipe(takeUntil(this._overlayRef.detachments()))
+      .subscribe((event: KeyboardEvent) => {
+        this._handleKeyboardNavigation(event);
+      });
+
     this._listenToClick(this._overlayRef, this._dropdownToggle.nativeElement).subscribe((event) => {
       const target = event.target as HTMLElement;
       const isDropdownItem = target.classList && target.classList.contains('dropdown-item');
@@ -342,6 +348,43 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
     this._animationState = 'visible';
   }
 
+  private _handleKeyboardNavigation(event: KeyboardEvent) {
+    const items: HTMLElement[] = Array.from(
+      this._dropdownMenu.nativeElement.querySelectorAll('.dropdown-item')
+    );
+    const key = event.key;
+    const activeElement = this._dropdownMenu.nativeElement.ownerDocument.activeElement;
+
+    if (items.length === 0) {
+      return;
+    }
+
+    let index = items.indexOf(activeElement);
+
+    switch (key) {
+      case 'ArrowDown':
+        event.preventDefault();
+
+        index = Math.min(index + 1, items.length - 1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+
+        if (index === -1) {
+          index = items.length - 1;
+          break;
+        }
+        index = Math.max(index - 1, 0);
+        break;
+    }
+
+    const nextActiveElement: HTMLElement = items[index];
+
+    if (nextActiveElement) {
+      nextActiveElement.focus();
+    }
+  }
+
   hide(): void {
     this._cdRef.markForCheck();
 

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

@@ -4,7 +4,7 @@
   "homepage": "https://mdbootstrap.com/docs/b5/angular/",
   "author": "MDBootstrap",
   "license": "MIT",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0",

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

@@ -10,7 +10,6 @@
     [max]="max"
     [step]="step"
     [value]="value"
-    [(ngModel)]="value"
     class="form-range"
     min="0"
     max="5"