wip(select): focus test

apps/demo-app/src/app/pages/select-sample/select-options-sample/select-options-sample.component.css

@@ -1,38 +1,33 @@
 :host {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
-  margin-top: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 0.5rem;
 }
 
 sk-select-option {
-  background-color: #fff;
-  color: #000;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out,
+    background-color: #fff;
+    color: #000;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    transition: color 0.3s ease-in-out, font-weight 0.3s ease-in-out,
     font-size 0.3s ease-in-out;
 }
 
 sk-select-option:first-child {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0.25rem;
+    border-top-left-radius: 0.25rem;
+    border-top-right-radius: 0.25rem;
 }
 
 sk-select-option:last-child {
-  border-bottom-left-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
 }
 
 @media (hover) {
-  sk-select-option:hover {
-    color: deeppink;
-    font-weight: bold;
-    font-size: 1.5em;
-  }
-}
-
-sk-select-option:not(:last-child) {
-  border-bottom: 1px solid #000;
+    sk-select-option:hover {
+        color: deeppink;
+        font-weight: bold;
+        font-size: 1.5em;
+    }
 }

apps/demo-app/src/app/pages/select-sample/select-options-sample/select-options-sample.component.ts

@@ -34,9 +34,9 @@ export const slideDeleteAnimation = (): AnimationMetadata => {
 export const slideFadeAnimationFactory = (): AnimationMetadata[] => {
   return [
     style({ opacity: 0, transform: 'translateY(-1.5rem)', scale: 0.8 }),
-    stagger('80ms', [
+    stagger('32ms', [
       animate(
-        '350ms cubic-bezier(0.05, 0.7, 0.1, 1)',
+        '150ms cubic-bezier(0.05, 0.7, 0.1, 1)',
         style({ opacity: 1, transform: 'translateY(0)', scale: 1 })
       ),
     ]),
@@ -84,7 +84,7 @@ export const zoomFactory = (
       ),
       transition(
         '* => hidden',
-        query('sk-select-option', slideDeleteAnimation(), {
+        query('sk-select-option', fadeFactory(1, 0, '350ms'), {
           optional: true,
         })
       ),

apps/demo-app/src/app/pages/select-sample/select-sample.component.html

@@ -3,7 +3,7 @@
 <sk-select
   [(ngModel)]="value"
   [skMultiple]="multiple()"
-  [animationDelay]="350"
+  [animationDelay]="250"
   (open)="showAnimation.set($event)"
 >
   <div class="sk-label" skSelectPlaceholder>Please select an option</div>
@@ -20,12 +20,4 @@
   <app-select-options-sample
     [show]="showAnimation()"
   ></app-select-options-sample>
-  <!--<div class="sk-options" [@animation]="animateOptions()" (@animation.start)="logAnimationData($event)" (@animation.done)="logAnimationData($event)">
-    <sk-select-option class="sk-option" [value]="{ data: 1 }">Test 1</sk-select-option>
-    <sk-select-option class="sk-option" [value]="{ data: 2 }">Test 2</sk-select-option>
-    <sk-select-option class="sk-option" [value]="{ data: 3 }">Test 3</sk-select-option>
-    <sk-select-option class="sk-option" [value]="{ data: 4 }">Test 4</sk-select-option>
-    <sk-select-option class="sk-option" [value]="{ data: 5 }">Test 5</sk-select-option>
-  </div>-->
-
 </sk-select>

libs/sketch/src/lib/select/components/select-option/select-option.component.ts

@@ -1,4 +1,10 @@
-import { Component, HostListener, inject, input } from '@angular/core';
+import {
+  Component,
+  HostBinding,
+  HostListener,
+  inject,
+  input,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SelectComponent } from '../../select.component';
 
@@ -13,6 +19,17 @@ export class SelectOptionComponent<T> {
   private readonly parent = inject(SelectComponent);
   value = input.required<T>();
 
+  @HostBinding('tabindex')
+  get tabindex(): number {
+    return 1;
+  }
+
+  @HostListener('keydown.space', ['$event'])
+  @HostListener('keydown.enter', ['$event'])
+  enterItem(): void {
+    this.parent.selectionChanged(this.value(), true);
+  }
+
   @HostListener('click', ['$event'])
   selectItem(): void {
     this.parent.selectionChanged(this.value());

libs/sketch/src/lib/select/select.component.html

@@ -5,6 +5,8 @@
   [skCdkOverlayPositions]="overlayPositions"
   [skCdkOverlayDisposeDelay]="animationDelay()"
   (click)="togglePanel(true)"
+  [tabIndex]="1"
+  (keydown.enter)="togglePanel(!this.panelIsVisible())"
 >
   @if (showPlaceholder()) {
     <ng-content select="[skSelectPlaceholder]"></ng-content>

libs/sketch/src/lib/select/select.component.ts

@@ -1,7 +1,9 @@
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   computed,
+  contentChildren,
   effect,
   forwardRef,
   inject,
@@ -11,19 +13,20 @@ import {
   untracked,
   ViewEncapsulation,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
   CdkOverlayDirective,
   DEFAULT_DROPOUT_POSITIONS,
 } from './directives/overlay.directive';
 import { CdkPortal } from '@angular/cdk/portal';
 import { MultipleDirective } from './directives/multiple.directive';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 
 @Component({
   selector: 'sk-select',
   standalone: true,
-  imports: [CommonModule, CdkOverlayDirective, CdkPortal],
+  imports: [CommonModule, CdkOverlayDirective, CdkPortal, CdkTrapFocus],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -35,13 +38,13 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
   styleUrl: './select.component.css',
   encapsulation: ViewEncapsulation.ShadowDom,
 })
-export class SelectComponent<T> implements ControlValueAccessor {
+export class SelectComponent<T> implements ControlValueAccessor, AfterViewInit {
   private readonly multipleRef = inject(MultipleDirective, { optional: true });
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
+  private readonly document = inject(DOCUMENT);
 
-  animationDelay = input(0);
-  open = output<boolean>();
-
+  readonly animationDelay = input(0);
+  readonly open = output<boolean>();
   readonly selectedValue = signal<T | T[] | undefined>(undefined);
   readonly showPlaceholder = computed(() => {
     const selectedValue = this.selectedValue();
@@ -51,6 +54,9 @@ export class SelectComponent<T> implements ControlValueAccessor {
     );
   });
   readonly panelIsVisible = signal(false);
+  readonly options = contentChildren('sk-select-option', {
+    descendants: true,
+  });
   readonly overlayPositions = DEFAULT_DROPOUT_POSITIONS;
 
   protected updateSelectionMode = effect(
@@ -78,9 +84,19 @@ export class SelectComponent<T> implements ControlValueAccessor {
   togglePanel(visible: boolean): void {
     this.panelIsVisible.set(visible);
     this.open.emit(visible);
+
+    if (visible) {
+      setTimeout(() => {
+        this.document.querySelector<HTMLElement>('sk-select-option')?.focus();
+      }, 32);
+    }
   }
 
-  selectionChanged(value: T): void {
+  ngAfterViewInit(): void {
+    console.log('SelectComponent.ngAfterViewInit', this.options());
+  }
+
+  selectionChanged(value: T, forceClose = false): void {
     if (this.multipleRef?.multiple()) {
       this.selectedValue.update((selected) => {
         if (Array.isArray(selected)) {
@@ -98,6 +114,10 @@ export class SelectComponent<T> implements ControlValueAccessor {
 
     this.onChange?.(this.selectedValue());
     this.onTouched?.();
+
+    if (forceClose) {
+      this.togglePanel(false);
+    }
   }
 
   writeValue(obj: T | T[] | undefined): void {