feat(dropdown): provide focus out event (#836)

* feat(dropdown): provide focus out event api * feat(multi-select): provide focus out event api * feat(dropdown): add focus out example * Update dropdown.md * docs(dropdown): change description Co-authored-by: [email protected] <[email protected]>
allianz · Feb 14, 2023 · eccc424 · eccc424
1 parent 747b314
commit eccc424
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 0 deletions.
diff --git a/projects/ng-aquila/documentation/examples/dropdown/dropdown-examples.module.ts b/projects/ng-aquila/documentation/examples/dropdown/dropdown-examples.module.ts
@@ -9,6 +9,7 @@ import { DropdownCustomLabelExampleComponent } from './dropdown-custom-label/dro
 import { DropdownDisabledItemsExampleComponent } from './dropdown-disabled-items/dropdown-disabled-items-example';
 import { DropdownFilterExampleComponent } from './dropdown-filter/dropdown-filter-example';
 import { DropdownFilterCustomExampleComponent } from './dropdown-filter-custom/dropdown-filter-custom-example';
+import { DropdownFocusOutExampleComponent } from './dropdown-focus-out/dropdown-focus-out-example';
 import { DropdownGroupExampleComponent } from './dropdown-group/dropdown-group-example';
 import { DropdownLazyExampleComponent } from './dropdown-lazy/dropdown-lazy-example';
 import { DropdownMultiSelectExampleComponent } from './dropdown-multi-select/dropdown-multi-select-example';
@@ -41,6 +42,7 @@ const EXAMPLES = [
     DropdownTemplateDrivenExampleComponent,
     DropdownLazyExampleComponent,
     DropdownScrollStrategyProviderExampleComponent,
+    DropdownFocusOutExampleComponent,
     MultiSelectExampleComponent,
     MultiSelectIntlExampleComponent,
 ];
@@ -74,6 +76,7 @@ export class DropdownExamplesModule {
             'dropdown-standard': DropdownStandardExampleComponent,
             'dropdown-template-driven': DropdownTemplateDrivenExampleComponent,
             'dropdown-lazy': DropdownLazyExampleComponent,
+            'dropdown-focus-out': DropdownFocusOutExampleComponent,
             'dropdown-scroll-strategy-provider':
                 DropdownScrollStrategyProviderExampleComponent,
             'multi-select': MultiSelectExampleComponent,

diff --git a/...-aquila/documentation/examples/dropdown/dropdown-focus-out/dropdown-focus-out-example.css b/...-aquila/documentation/examples/dropdown/dropdown-focus-out/dropdown-focus-out-example.css
diff --git a/...aquila/documentation/examples/dropdown/dropdown-focus-out/dropdown-focus-out-example.html b/...aquila/documentation/examples/dropdown/dropdown-focus-out/dropdown-focus-out-example.html
@@ -0,0 +1,24 @@
+<form [formGroup]="form">
+    <div nxLayout="grid">
+        <div nxRow>
+            <div nxCol="12,12,6">
+                <nx-formfield nxLabel="Car brand">
+                    <nx-dropdown
+                        formControlName="dropdown"
+                        (focusOut)="onFocusOut()"
+                        (focus)="onFocus()"
+                    >
+                        <nx-dropdown-item>CLEAR VALUE</nx-dropdown-item>
+                        <nx-dropdown-item nxValue="BMW"></nx-dropdown-item>
+                        <nx-dropdown-item nxValue="Audi"></nx-dropdown-item>
+                        <nx-dropdown-item nxValue="Volvo"></nx-dropdown-item>
+                        <nx-dropdown-item nxValue="Mini"></nx-dropdown-item>
+                    </nx-dropdown>
+                    <nx-message nxContext="info" nxFormfieldNote>
+                        Focusing: {{focusing}}
+                    </nx-message>
+                </nx-formfield>
+            </div>
+        </div>
+    </div>
+</form>
diff --git a/...g-aquila/documentation/examples/dropdown/dropdown-focus-out/dropdown-focus-out-example.ts b/...g-aquila/documentation/examples/dropdown/dropdown-focus-out/dropdown-focus-out-example.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { UntypedFormBuilder } from '@angular/forms';
+
+/**
+ * @title Focus out example
+ */
+@Component({
+    selector: 'dropdown-focus-out-example',
+    templateUrl: './dropdown-focus-out-example.html',
+    styleUrls: ['./dropdown-focus-out-example.css'],
+})
+export class DropdownFocusOutExampleComponent {
+    form = new UntypedFormBuilder().group({
+        dropdown: ['BMW'],
+    });
+
+    focusing = false;
+
+    onFocusOut() {
+        this.focusing = false;
+    }
+
+    onFocus() {
+        this.focusing = true;
+    }
+}
diff --git a/projects/ng-aquila/src/dropdown/dropdown.md b/projects/ng-aquila/src/dropdown/dropdown.md
@@ -143,6 +143,10 @@ The provider includes a `changes` subject that you can use to notify dependent c
 
 <!-- example(multi-select-intl) -->
 
+### Focus out
+A focusout event is emitted when the selected dropdown has lost focus.
+<!-- example(dropdown-focus-out) -->
+
 ### Accessibility
 
 The dropdown can be accessed via keyboard. If the component owns the focus, the dropdown will open when you hit ENTER. Pressing ESC while the dropdown is open will close it. To select a value while the dropdown is open, use ARROW-UP and ARROW-DOWN. You can quickly navigate to the first item with the HOME key and to the last item with the END key. Pressing the ALT key plus either the ARROW_UP or ARROW_DOWN key opens or closes the dropdown.

diff --git a/projects/ng-aquila/src/dropdown/dropdown.ts b/projects/ng-aquila/src/dropdown/dropdown.ts
@@ -316,6 +316,9 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
     /** Event emitted when the select panel has been toggled. */
     @Output() readonly openedChange = new EventEmitter<boolean>();
 
+    /** Event emitted when the select panel has been focus out. */
+    @Output() readonly focusOut = new EventEmitter<boolean>();
+
     /** Event emitted when the dropdown items get filtered. Returns the currently visible dropdown items. */
     @Output('filterResult') readonly filterResultChange = new EventEmitter<NxDropdownItemComponent[]>();
 
@@ -1151,6 +1154,7 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
         if (!this.disabled && !this.panelOpen) {
             this._onTouched();
             this._cdr.markForCheck();
+            this.focusOut.emit(true);
             this.stateChanges.next();
         }
     }

diff --git a/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts b/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts
@@ -200,6 +200,9 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
     /** Event emitted when the selected value has been changed. */
     @Output() readonly selectionChange = new EventEmitter<T[]>();
 
+    /** Event emitted when the select panel has been focus out. */
+    @Output() readonly focusOut = new EventEmitter<boolean>();
+
     /** @docs-private */
     readonly controlType: string = 'nx-multi-select';
 
@@ -446,6 +449,9 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
 
     _onTriggerBlur() {
         this._onTouched();
+        if (!this._isOpen && !this.disabled) {
+            this.focusOut.emit(true);
+        }
     }
 
     _onFocusWithinOverlay($event: Event) {