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
vmware-clarity · Jan 19, 2024 · fa1da8a · fa1da8a
1 parent bbea2f6
commit fa1da8a
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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!`);
   }