update dropdown behavoir
This commit is contained in:
parent
ce60fbf906
commit
e141241aba
|
@ -25,7 +25,7 @@
|
|||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class="size-6 cursor-pointer"
|
||||
(click)="toggleDropdown()"
|
||||
(click)="toggleDropdown($event)"
|
||||
[class.rotate-180]="showDropdown()">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
|
|
|
@ -119,20 +119,27 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
|
|||
this.isMouseInDropdown.set(false);
|
||||
}
|
||||
|
||||
public toggleDropdown(): void {
|
||||
this.showDropdown.set(!this.showDropdown());
|
||||
public toggleDropdown(event: MouseEvent): void {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
const newDropdownState = !this.showDropdown();
|
||||
|
||||
this.showDropdown.set(newDropdownState);
|
||||
|
||||
if (newDropdownState) {
|
||||
// Wenn das Dropdown geöffnet wird, aktualisieren wir die filteredItems
|
||||
this.updateFilteredItems();
|
||||
} else {
|
||||
// Wenn wir das Dropdown schließen, verhindern wir, dass das Eingabefeld den Fokus erhält
|
||||
(event.target as HTMLElement).blur();
|
||||
}
|
||||
}
|
||||
|
||||
public onInput(event: Event): void {
|
||||
const value = (event.target as HTMLInputElement).value;
|
||||
|
||||
this.searchTerm.set(value);
|
||||
|
||||
const matchingItems = this.items().filter((item) =>
|
||||
item.toLowerCase().includes(value.toLowerCase())
|
||||
);
|
||||
|
||||
this.filteredItems.set(matchingItems);
|
||||
this.updateFilteredItems();
|
||||
|
||||
const exactMatch = this.items().find(
|
||||
(item) => item.toLowerCase() === value.toLowerCase()
|
||||
|
@ -148,8 +155,7 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
|
|||
this.itemSelected.emit('');
|
||||
}
|
||||
|
||||
this.showDropdown.set(matchingItems.length > 0 || value.trim() !== '');
|
||||
|
||||
this.showDropdown.set(true);
|
||||
this.onTouched();
|
||||
}
|
||||
|
||||
|
@ -207,21 +213,33 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
|
|||
}
|
||||
|
||||
public onFocus(): void {
|
||||
this.filteredItems.set(this.items());
|
||||
this.showDropdown.set(true);
|
||||
this.updateFilteredItems();
|
||||
this.markAsTouched();
|
||||
}
|
||||
|
||||
public onBlur(): void {
|
||||
if (!this.isMouseInDropdown()) {
|
||||
this.closeDropdown();
|
||||
this.markAsTouched();
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (!this.isMouseInDropdown()) {
|
||||
this.closeDropdown();
|
||||
this.markAsTouched();
|
||||
}
|
||||
}, 1);
|
||||
}
|
||||
|
||||
private isValidOption(value: string): boolean {
|
||||
return this.items().includes(value);
|
||||
}
|
||||
|
||||
private updateFilteredItems(): void {
|
||||
const searchTerm = this.searchTerm().toLowerCase();
|
||||
const matchingItems = this.items().filter((item) =>
|
||||
item.toLowerCase().includes(searchTerm)
|
||||
);
|
||||
|
||||
this.filteredItems.set(matchingItems);
|
||||
}
|
||||
|
||||
private onChange: (value: string) => void = () => {};
|
||||
private onTouched: () => void = () => {};
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue