fix bug to hidden a selector if other selector is open

Author: jose-web

projects/some-angular-utils/filter/src/lib/components/custom-select/custom-select.component.ts

@@ -1,14 +1,17 @@
-import { Component, ElementRef, HostListener, Input, ViewChild, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, ElementRef, HostListener, Input, ViewChild, OnInit, OnChanges, OnDestroy, Optional, SimpleChanges } from '@angular/core';
 import { AbstractControl, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
+import { Subscription } from 'rxjs';
+
+import { SelectCoordinatorService } from './select-coordinator.service';
 
 @Component({
     selector: 'custom-select',
     templateUrl: './custom-select.component.html',
     styleUrl: './custom-select.component.scss',
     imports: [CommonModule, ReactiveFormsModule]
 })
-export class CustomSelectComponent implements OnInit, OnChanges {
+export class CustomSelectComponent implements OnInit, OnChanges, OnDestroy {
     @Input() label = '';
     @Input() placeholder = 'Selecciona una opción';
     @Input() isMultiple = false;
@@ -38,6 +41,8 @@ export class CustomSelectComponent implements OnInit, OnChanges {
     private _formControlItem!: AbstractControl;
     inputControl!: FormControl;
 
+    private openedSubscription?: Subscription;
+
     @Input() set formControlItem(ctrl: AbstractControl) {
         this._formControlItem = ctrl;
         this.inputControl = ctrl as FormControl;
@@ -54,7 +59,7 @@ export class CustomSelectComponent implements OnInit, OnChanges {
     }
     get formControlItem() { return this._formControlItem; }
 
-    constructor(private elementRef: ElementRef) {
+    constructor(private elementRef: ElementRef, @Optional() private coordinator?: SelectCoordinatorService) {
         this.searchControl.valueChanges.subscribe(val => {
             if (this.isOpen) {
                 this.filterData(val || '');
@@ -68,6 +73,17 @@ export class CustomSelectComponent implements OnInit, OnChanges {
         if (this.inputControl) {
             this.syncVisualInput(this.inputControl.value);
         }
+
+        // Si otro custom-select del mismo <sau-filter> se abre, cerramos este
+        this.openedSubscription = this.coordinator?.opened$.subscribe(source => {
+            if (source !== this && this.isOpen) {
+                this.closeDropdown();
+            }
+        });
+    }
+
+    ngOnDestroy() {
+        this.openedSubscription?.unsubscribe();
     }
 
     // Captura cualquier desajuste de ciclo de vida de inputs nativos de Angular
@@ -91,6 +107,10 @@ export class CustomSelectComponent implements OnInit, OnChanges {
             return;
         }
 
+        // stopPropagation() de arriba impide que el clickOut() de document de otros
+        // custom-select se dispare, así que avisamos explícitamente para que se cierren
+        this.coordinator?.notifyOpened(this);
+
         this.isOpen = true;
         this.searchControl.setValue('', { emitEvent: false });
         this.filteredOptions = [...this.options];

projects/some-angular-utils/filter/src/lib/components/custom-select/select-coordinator.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+/**
+ * Coordina la apertura de los distintos `custom-select` de un mismo `<sau-filter>`.
+ * openDropdown() hace stopPropagation(), así que el click nunca llega a document y
+ * el clickOut() de los demás selects nunca se dispara; sin este servicio, dos
+ * selects abiertos a la vez se quedan ambos abiertos.
+ */
+@Injectable()
+export class SelectCoordinatorService {
+  private readonly openedSource = new Subject<unknown>();
+  readonly opened$ = this.openedSource.asObservable();
+
+  notifyOpened(source: unknown): void {
+    this.openedSource.next(source);
+  }
+}

projects/some-angular-utils/filter/src/lib/filter.ts

@@ -4,6 +4,7 @@ import { CommonModule, DatePipe } from '@angular/common';
 
 import { CustomInputComponent } from './components/custom-input/custom-input.component';
 import { CustomSelectComponent } from './components/custom-select/custom-select.component';
+import { SelectCoordinatorService } from './components/custom-select/select-coordinator.service';
 import { SAUDateRangePickerModule } from '@some-angular-utils/date-range-picker';
 import { FilterButtonComponent } from './components/filter-button/filter-button.component';
 
@@ -12,7 +13,7 @@ import { FilterButtonComponent } from './components/filter-button/filter-button.
   templateUrl: './filter.html',
   styleUrls: ['./filter.scss'],
   encapsulation: ViewEncapsulation.None,
-  providers: [DatePipe],
+  providers: [DatePipe, SelectCoordinatorService],
   imports: [
     CommonModule,
     ReactiveFormsModule,