From fa1da8a748f5a63c2acabadb66e6b0d8ed5511b0 Mon Sep 17 00:00:00 2001
From: Kevin Buhmann <kbuhmann@vmware.com>
Date: Fri, 19 Jan 2024 08:46:59 -0600
Subject: [PATCH] fix(button-group): handle keyboard focus for async menu
 buttons (#1142)

With both synchronous and asynchronous population, focus is moved to the
first menu button when the button group menu is opened, keyboard focus
works properly, and the menu is closed when one of the menu buttons is
activated.

CDE-1571
closes #952
---
 .../src/button/button-group/button-group.ts    | 18 ++++++++----------
 .../basic-structure/basic-button-group.html    | 14 ++++++++++++++
 .../basic-structure/basic-button-group.ts      |  4 ++++
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/projects/angular/src/button/button-group/button-group.ts b/projects/angular/src/button/button-group/button-group.ts
index 50a3f96e77..e68623454f 100644
--- a/projects/angular/src/button/button-group/button-group.ts
+++ b/projects/angular/src/button/button-group/button-group.ts
@@ -161,15 +161,13 @@ export class ClrButtonGroup implements AfterContentInit, AfterViewInit {
   }
 
   private handleFocusOnMenuOpen() {
-    if (this.menuButtons.length) {
-      this.toggleService.popoverVisible.pipe(takeUntil(this.destroy$)).subscribe(visible => {
-        if (visible) {
-          this.focusHandler.initialize({
-            menu: this.menu.nativeElement,
-            menuToggle: this.menuToggle.nativeElement,
-          });
-        }
-      });
-    }
+    this.toggleService.popoverVisible.pipe(takeUntil(this.destroy$)).subscribe(visible => {
+      if (visible) {
+        this.focusHandler.initialize({
+          menu: this.menu.nativeElement,
+          menuToggle: this.menuToggle.nativeElement,
+        });
+      }
+    });
   }
 }
diff --git a/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.html b/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.html
index fea7448fcd..1370fcc72e 100644
--- a/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.html
+++ b/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.html
@@ -32,6 +32,7 @@ <h4>Basic Structure</h4>
 </label>
 
 <div class="clr-example">
+  Menu buttons populated synchronously:
   <clr-button-group class="btn-primary" [clrMenuPosition]="position">
     <clr-button (click)="handleClick(1)">1</clr-button>
     <clr-button (click)="handleClick(2)">2</clr-button>
@@ -43,6 +44,19 @@ <h4>Basic Structure</h4>
   </clr-button-group>
 </div>
 
+<div class="clr-example">
+  Menu buttons populated asynchronously:
+  <clr-button-group class="btn-primary" [clrMenuPosition]="position">
+    <clr-button (click)="handleClick(1)">1</clr-button>
+    <clr-button (click)="handleClick(2)">2</clr-button>
+    <clr-button (click)="handleClick(3)">3</clr-button>
+    <clr-button (click)="handleClick(4)">4</clr-button>
+    <clr-button *ngFor="let button of asyncMenuButtons | async" [clrInMenu]="true" (click)="handleClick(button)">
+      {{button}}
+    </clr-button>
+  </clr-button-group>
+</div>
+
 <div class="clr-example">
   <clr-button-group class="btn-icon">
     <clr-button>
diff --git a/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.ts b/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.ts
index c92a7a94d7..1e349419f2 100644
--- a/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.ts
+++ b/projects/demo/src/app/button-group/angular/basic-structure/basic-button-group.ts
@@ -5,6 +5,8 @@
  */
 
 import { Component } from '@angular/core';
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
 
 @Component({
   selector: 'clr-basic-button-group-demo',
@@ -14,6 +16,8 @@ import { Component } from '@angular/core';
 export class BasicButtonGroupDemo {
   position = 'bottom-left';
 
+  readonly asyncMenuButtons = of([5, 6, 7]).pipe(delay(100));
+
   handleClick(id: number): void {
     console.log(`Button ${id} clicked!`);
   }