Merge pull request #15867 from IgniteUI/mkirkova/feat-combo-clear-selection-15841

Make 'clear selection' button focusable and add keyboard navigation for it

Author: ChronosSF

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -19,7 +19,7 @@
     </ng-container>
     @if (displayValue) {
         <igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button"
-            (click)="handleClearItems($event)">
+            (click)="handleClearItems($event)" (keydown)="handleClearKeyDown($event)" [tabindex]="disabled ? -1 : 0" role="button">
             @if (clearIconTemplate) {
                 <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
             }

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -2269,6 +2269,21 @@ describe('igxCombo', () => {
                         cancel: false
                     });
             });
+            it('should clear the selection on Enter of the focused clear icon', () => {
+                const selectedItem_1 = combo.dropdown.items[1];
+                combo.toggle();
+                fixture.detectChanges();
+                simulateComboItemClick(1);
+                expect(combo.selection[0]).toEqual(selectedItem_1.value);
+                expect(combo.value[0]).toEqual(selectedItem_1.value[combo.valueKey]);
+
+                const clearBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`));
+                UIInteractions.triggerEventHandlerKeyDown('Enter', clearBtn);
+                fixture.detectChanges();
+                expect(input.nativeElement.value).toEqual('');
+                expect(combo.selection.length).toEqual(0);
+                expect(combo.value.length).toEqual(0);
+            });
             it('should not be able to select group header', () => {
                 spyOn(combo.selectionChanging, 'emit').and.callThrough();
                 combo.toggle();

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -264,10 +264,7 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
     /**
      * @hidden @internal
      */
-    public handleClearItems(event: Event): void {
-        if (this.disabled) {
-            return;
-        }
+    public clearInput(event: Event): void {
         this.deselectAllItems(true, event);
         if (this.collapsed) {
             this.getEditElement().focus();
@@ -277,6 +274,26 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
         event.stopPropagation();
     }
 
+    /**
+     * @hidden @internal
+     */
+    public handleClearItems(event: Event): void {
+        if (this.disabled) {
+            return;
+        }
+        this.clearInput(event);
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public handleClearKeyDown(eventArgs: KeyboardEvent) {
+        if (eventArgs.key === 'Enter' || eventArgs.key === ' ') {
+            eventArgs.preventDefault();
+            this.clearInput(eventArgs);
+        }
+    }
+
     /**
      * Select defined items
      *

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -281,6 +281,10 @@
         %igx-combo__clear-button {
             color: var-get($theme, 'clear-button-foreground-focus');
             background: var-get($theme, 'clear-button-background-focus');
+
+            &:focus {
+                color: color($color: 'secondary');
+            }
         }
     }
 

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html

@@ -26,7 +26,7 @@
 
     @if (hasSelectedItem) {
         <igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button"
-            (click)="handleClear($event)">
+            (click)="handleClear($event)" (keydown)="handleClearKeyDown($event)" [tabindex]="disabled ? -1 : 0" role="button">
             @if (clearIconTemplate) {
                 <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
             }

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -1230,6 +1230,19 @@ describe('IgxSimpleCombo', () => {
             expect(combo.displayValue).toEqual('Wisconsin');
         });
 
+        it('should clear the selection on Enter of the focused clear icon', () => {
+            combo.select(combo.data[2][combo.valueKey]);
+            fixture.detectChanges();
+            expect(combo.selection).toBeDefined()
+            expect(input.nativeElement.value).toEqual('Massachusetts');
+
+            const clearBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`));
+            UIInteractions.triggerEventHandlerKeyDown('Enter', clearBtn);
+            fixture.detectChanges();
+            expect(input.nativeElement.value.length).toEqual(0);
+            expect(combo.selection).not.toBeDefined();
+        });
+
         it('should not filter the data when disableFiltering is true', () => {
             combo.disableFiltering = true;
             fixture.detectChanges();

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts

@@ -425,15 +425,11 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
     }
 
     /** @hidden @internal */
-    public handleClear(event: Event): void {
-        if (this.disabled) {
-            return;
-        }
-
+    public clearInput(event: Event): void {
         const oldSelection = this.selection;
         this.clearSelection(true);
 
-        if(!this.collapsed){
+        if (!this.collapsed) {
             this.focusSearchInput(true);
         }
         event.stopPropagation();
@@ -447,6 +443,23 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         this.comboInput.focus();
     }
 
+    /** @hidden @internal */
+    public handleClear(event: Event): void {
+        if (this.disabled) {
+            return;
+        }
+
+        this.clearInput(event);
+    }
+
+    /** @hidden @internal */
+    public handleClearKeyDown(event: KeyboardEvent): void {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.clearInput(event);
+        }
+    }
+
     /** @hidden @internal */
     public handleOpened(): void {
         this.triggerCheck();