feat(select): close on escape

qupaya · Apr 30, 2024 · 36af251 · 36af251
1 parent e976994
commit 36af251
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/libs/sketch/src/lib/components/select/directives/overlay.directive.ts b/libs/sketch/src/lib/components/select/directives/overlay.directive.ts
@@ -84,9 +84,6 @@ export class CdkOverlayDirective {
       backdropClass: this.backdropClass(),
       panelClass: this.panelClass(),
       positionStrategy,
-      scrollStrategy: this.overlay.scrollStrategies.reposition({
-        autoClose: true,
-      }),
     });
 
     this.syncOverlayWidth();

diff --git a/libs/sketch/src/lib/components/select/select.component.css b/libs/sketch/src/lib/components/select/select.component.css
@@ -13,6 +13,7 @@
   padding: var(--sk-select-label-padding);
   border: 1px solid var(--sk-select-label-border-color);
   border-radius: var(--sk-select-label-border-radius);
+  cursor: pointer;
 }
 
 .sk-select-trigger:focus {

diff --git a/libs/sketch/src/lib/components/select/select.component.html b/libs/sketch/src/lib/components/select/select.component.html
@@ -4,7 +4,7 @@
   [skCdkOverlayShow]="panelIsVisible()"
   [skCdkOverlayDisposeDelay]="animationDelay()"
   [tabIndex]="0"
-  (click)="togglePanel(true, false)"
+  (click)="togglePanel(true)"
   (keydown.enter)="togglePanel(!this.panelIsVisible())"
   (keydown.space)="togglePanel(!this.panelIsVisible())"
   (skCdkOverlayVisible)="togglePanel($event)"

diff --git a/libs/sketch/src/lib/components/select/select.component.ts b/libs/sketch/src/lib/components/select/select.component.ts
@@ -5,6 +5,7 @@ import {
   computed,
   effect,
   forwardRef,
+  HostListener,
   inject,
   input,
   output,
@@ -39,7 +40,8 @@ export class SelectComponent<T> implements ControlValueAccessor {
   animationDelay = input(0);
   closeOnSelect = input(false);
   multiple = input(false, { transform: booleanAttribute });
-  readonly autoFocus = signal(false);
+
+  readonly autoFocus = signal(true);
   readonly selectedValue = signal<T | T[] | undefined>(undefined);
   readonly panelIsVisible = signal(false);
   readonly showPlaceholder = computed(() => {
@@ -49,8 +51,16 @@ export class SelectComponent<T> implements ControlValueAccessor {
       (!isArray && !selectedValue) || (isArray && selectedValue.length <= 0)
     );
   });
+
   readonly open = output<boolean>();
 
+  @HostListener('document:keydown.escape')
+  closePanel(): void {
+    if (this.panelIsVisible()) {
+      this.togglePanel(false);
+    }
+  }
+
   protected readonly updateSelectionMode = effect(
     () => {
       const selectedValue = untracked(this.selectedValue);
@@ -73,9 +83,8 @@ export class SelectComponent<T> implements ControlValueAccessor {
     { allowSignalWrites: true }
   );
 
-  togglePanel(visible: boolean, focus = true): void {
+  togglePanel(visible: boolean): void {
     this.panelIsVisible.set(visible);
-    this.autoFocus.set(focus);
     this.open.emit(visible);
   }
 
@@ -104,19 +113,15 @@ export class SelectComponent<T> implements ControlValueAccessor {
   }
 
   keyArrowUp({ target }: Event): void {
-    console.log('Arrow Down', target);
     if (target instanceof HTMLElement) {
-      console.log('Element', target.previousElementSibling);
       if (target.previousElementSibling instanceof HTMLElement) {
         target.previousElementSibling.focus();
       }
     }
   }
 
   keyArrowDown({ target }: Event): void {
-    console.log('Arrow Down', target);
     if (target instanceof HTMLElement) {
-      console.log('Element', target.nextElementSibling);
       if (target.nextElementSibling instanceof HTMLElement) {
         target.nextElementSibling.focus();
       }