diff --git a/libs/sketch/src/lib/components/select/directives/overlay.directive.ts b/libs/sketch/src/lib/components/select/directives/overlay.directive.ts index 52eb855..db9ab66 100644 --- 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 index 3556b63..694f1b0 100644 --- 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 index 06d2719..a19b3d4 100644 --- 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 index b2297db..c1ce7a1 100644 --- 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 implements ControlValueAccessor { animationDelay = input(0); closeOnSelect = input(false); multiple = input(false, { transform: booleanAttribute }); - readonly autoFocus = signal(false); + + readonly autoFocus = signal(true); readonly selectedValue = signal(undefined); readonly panelIsVisible = signal(false); readonly showPlaceholder = computed(() => { @@ -49,8 +51,16 @@ export class SelectComponent implements ControlValueAccessor { (!isArray && !selectedValue) || (isArray && selectedValue.length <= 0) ); }); + readonly open = output(); + @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 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,9 +113,7 @@ export class SelectComponent 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(); } @@ -114,9 +121,7 @@ export class SelectComponent implements ControlValueAccessor { } 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(); }