Cleanup Dropdown UI

src/app/components/dropdown/dropdown.ts

@@ -1,4 +1,4 @@
-import { Component, input, model, output, signal, HostListener, ElementRef
+import { Component, input, model, output, signal, HostListener, ElementRef, computed
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 
@@ -20,7 +20,7 @@ export interface DropdownOption {
     '[class.open]': 'isOpen()',
     'tabindex': '0',
     '(click)': 'toggle()',
-    '(keydown.enter)': 'toggle()',
+    '(keydown.enter)': 'onEnter($event)',
     '(keydown.space)': 'onSpaceDown($event)',
     '(keydown.escape)': 'close()',
     '(keydown.arrowdown)': 'onArrowDown($event)',
@@ -28,21 +28,30 @@ export interface DropdownOption {
   }
 })
 export class Dropdown {
-  options = input<DropdownOption[]>([]);
+  options = input<Array<DropdownOption | string>>([]);
   placeholder = input<string>('Select an option');
   icon = input<string>();
-  selectedValue = model<any>(null);
-  change = output<any>();
+  value = model<any>(null);
+  selectionChange = output<any>();
 
   isOpen = signal(false);
   focusedIndex = signal(-1);
 
   constructor(private el: ElementRef) {}
 
+  normalizedOptions = computed(() => {
+    return this.options().map(opt => {
+      if (typeof opt === 'string') {
+        return { label: opt, value: opt };
+      }
+      return opt;
+    });
+  });
+
   toggle() {
     this.isOpen.update(v => !v);
     if (this.isOpen()) {
-      this.focusedIndex.set(this.options().findIndex(o => o.value === this.selectedValue()));
+      this.focusedIndex.set(this.normalizedOptions().findIndex(o => o.value === this.value()));
     }
   }
 
@@ -52,14 +61,33 @@ export class Dropdown {
   }
 
   selectOption(option: DropdownOption) {
-    this.selectedValue.set(option.value);
-    this.change.emit(option.value);
+    this.value.set(option.value);
+    this.selectionChange.emit(option.value);
     this.close();
   }
 
+  onEnter(event: Event) {
+    event.preventDefault();
+    if (this.isOpen()) {
+      const currentIndex = this.focusedIndex();
+      if (currentIndex >= 0 && currentIndex < this.normalizedOptions().length) {
+        this.selectOption(this.normalizedOptions()[currentIndex]);
+      }
+    } else {
+      this.toggle();
+    }
+  }
+
   onSpaceDown(event: Event) {
     event.preventDefault();
-    this.toggle();
+    if (this.isOpen()) {
+      const currentIndex = this.focusedIndex();
+      if (currentIndex >= 0 && currentIndex < this.normalizedOptions().length) {
+        this.selectOption(this.normalizedOptions()[currentIndex]);
+      }
+    } else {
+      this.toggle();
+    }
   }
 
   onArrowDown(event: Event) {
@@ -68,7 +96,7 @@ export class Dropdown {
       this.toggle();
       return;
     }
-    this.focusedIndex.update(i => (i + 1) % this.options().length);
+    this.focusedIndex.update(i => (i + 1) % this.normalizedOptions().length);
   }
 
   onArrowUp(event: Event) {
@@ -77,7 +105,7 @@ export class Dropdown {
       this.toggle();
       return;
     }
-    this.focusedIndex.update(i => (i - 1 + this.options().length) % this.options().length);
+    this.focusedIndex.update(i => (i - 1 + this.normalizedOptions().length) % this.normalizedOptions().length);
   }
 
   @HostListener('document:click', ['$event'])
@@ -87,8 +115,8 @@ export class Dropdown {
     }
   }
 
-  get selectedLabel(): string {
-    const selected = this.options().find(o => o.value === this.selectedValue());
+  selectedLabel = computed(() => {
+    const selected = this.normalizedOptions().find(o => o.value === this.value());
     return selected ? selected.label : this.placeholder();
-  }
+  });
 }