prevent tab focus change

graycoreio · Dec 2, 2023 · f63bc55 · f63bc55
1 parent 4b1703f
commit f63bc55
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 21 deletions.
diff --git a/libs/design/src/molecules/select/select.component.spec.ts b/libs/design/src/molecules/select/select.component.spec.ts
@@ -35,9 +35,6 @@ import { DaffSelectModule } from './select.module';
       [options]="optionsValue"
       [formControl]="controlValue"
     >
-      <ng-template daffSelectSelectedOption let-selected="selected">
-        <div class="test-selected">{{selected}}</div>
-      </ng-template>
       <ng-template daffSelectOption let-isSelected="isSelected" let-option="option">
         <div class="test-option" [attr.data-value]="option" [attr.data-is-selected]="isSelected">
           <div>{{option}}</div>
@@ -123,7 +120,7 @@ describe('DaffSelectComponent', () => {
     });
 
     it('should add the disabled class', () => {
-      expect(de.classes.disabled).toBeTruthy();
+      expect(de.classes['daff-select--disabled']).toBeTruthy();
     });
 
     it('should disable the button', () => {
@@ -139,6 +136,17 @@ describe('DaffSelectComponent', () => {
       fixture.detectChanges();
     });
 
+    describe('and when the tab key is pressed', () => {
+      beforeEach(() => {
+        TestBed.inject(DOCUMENT).dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
+        fixture.detectChanges();
+      });
+
+      it('should not remove focus from the select', () => {
+        expect(TestBed.inject(DOCUMENT).activeElement).toEqual(buttonElement);
+      });
+    });
+
     describe('and when the backdrop is clicked', () => {
       beforeEach(() => {
         TestBed.inject(DOCUMENT).querySelector('.cdk-overlay-transparent-backdrop').dispatchEvent(new MouseEvent('click'));
@@ -163,30 +171,24 @@ describe('DaffSelectComponent', () => {
         expect(wrapper.controlValue.value).toEqual(1);
       });
 
-      it('should update the selected value in the selected option slot', () => {
-        expect(fixture.debugElement.query(By.css('.test-selected')).nativeElement.innerText).toEqual('1');
-      });
-
       it('should update the is selected value in the option slot', () => {
         expect(optionEl.getAttribute('data-is-selected')).toEqual('true');
       });
     });
 
     describe('and when the form control value is changed', () => {
+      let optionEl: HTMLElement;
       let value: number;
 
       beforeEach(() => {
+        optionEl = fixture.debugElement.query(By.css('.test-option[data-value="1"]')).nativeElement;
         value = 1;
-        wrapper.controlValue.setValue(value);
+        wrapper.controlValue.patchValue(value);
         fixture.detectChanges();
       });
 
-      it('should update the selected value in the selected option slot', () => {
-        expect(fixture.debugElement.query(By.css('.test-selected')).nativeElement.innerText).toEqual('1');
-      });
-
       it('should update the is selected value in the option slot', () => {
-        expect(fixture.debugElement.query(By.css('.test-option[data-value="1"]')).nativeElement.getAttribute('data-is-selected')).toEqual('true');
+        expect(optionEl.getAttribute('data-is-selected')).toEqual('true');
       });
     });
 

diff --git a/libs/design/src/molecules/select/select.component.ts b/libs/design/src/molecules/select/select.component.ts
@@ -34,16 +34,16 @@ import {
   takeUntil,
 } from 'rxjs';
 
-import {
-  DaffSkeletonable,
-  daffSkeletonableMixin,
-} from '../../core/skeletonable/public_api';
 import {
   daffSelectAnimations,
   DaffSelectAnimationState,
 } from './animation/select-animation';
 import { getAnimationState } from './animation/select-animation-state';
 import { DaffSelectOptionDirective } from './option/option.directive';
+import {
+  DaffSkeletonable,
+  daffSkeletonableMixin,
+} from '../../core/skeletonable/public_api';
 
 class _base {
   constructor(
@@ -95,11 +95,11 @@ export class DaffSelectComponent<T = unknown> extends daffSkeletonableMixin(_bas
     return this.disabled;
   }
 
-  @ViewChild('field') buttonElement: ElementRef;
+  @ViewChild('field') buttonElement: ElementRef<HTMLButtonElement>;
   @ViewChild('optionsTemplate') optionsTemplatePortal: TemplatePortal<unknown>;
 
   @ContentChild(DaffSelectOptionDirective)
-  optionTemplate?: DaffSelectOptionDirective;
+    optionTemplate?: DaffSelectOptionDirective;
 
   get isOpen(): boolean {
     return this._open;
@@ -117,11 +117,18 @@ export class DaffSelectComponent<T = unknown> extends daffSkeletonableMixin(_bas
     private cd: ChangeDetectorRef,
     _elementRef: ElementRef,
     _renderer: Renderer2,
-    @Inject(DOCUMENT) private document: any,
+    @Inject(DOCUMENT) private document: Document,
     @Optional() @Self() public ngControl: NgControl,
     private overlay: Overlay,
   ) {
     super(_elementRef, _renderer);
+    this.document.addEventListener('keydown', (event) => {
+      if (event.key === 'Tab' && this._open) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.buttonElement.nativeElement.focus();
+      }
+    });
     if (this.ngControl != null) {
       this.ngControl.valueAccessor = this;
     }