diff --git a/src/app/features/components/products/product-form/product-form.component.css b/src/app/features/components/products/product-form/product-form.component.css
index ebd9b32..9cd19cf 100644
--- a/src/app/features/components/products/product-form/product-form.component.css
+++ b/src/app/features/components/products/product-form/product-form.component.css
@@ -108,7 +108,7 @@ h4[card-header] { margin-bottom: 0; }
.placeholder { color: var(--text-color-secondary); }
.category-checkbox-group { max-height: 200px; overflow-y: auto; padding: 0.75rem; }
.category-checkbox-group label { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
-.form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: var(--grid-gap); padding-top: var(--grid-gap); border-top: 1px solid var(--color-border); }
+.form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: var(--grid-gap); padding-top: var(--grid-gap); border-top: none; }
@media (max-width: 1024px) {
.edit-layout { grid-template-columns: 1fr; }
diff --git a/src/app/features/components/products/product-form/product-form.component.html b/src/app/features/components/products/product-form/product-form.component.html
index 4b0c1ab..812ab1e 100644
--- a/src/app/features/components/products/product-form/product-form.component.html
+++ b/src/app/features/components/products/product-form/product-form.component.html
@@ -84,7 +84,7 @@
-
+
void = () => {};
disabled = false;
+ // ++ FÜGEN SIE DIESEN GETTER HINZU ++
+ // Dieser Getter wird immer dann neu berechnet, wenn Angular die Ansicht prüft.
+ // Er hat immer Zugriff auf die aktuellsten `options` und den aktuellsten `value`.
+ get selectedLabel(): string | null {
+ const selectedOption = this.options.find(opt => opt.value === this.value);
+ return selectedOption ? selectedOption.label : null;
+ }
+
constructor(private elementRef: ElementRef) {}
- // NEU: Schließt das Dropdown, wenn außerhalb des Elements geklickt wird
@HostListener('document:click', ['$event'])
- onDocumentClick(event: MouseEvent): void {
- // Diese Logik ist jetzt sicher, weil Klicks innerhalb der Komponente sie nie erreichen
+ onDocumentClick(event: MouseEvent): void {
if (!this.elementRef.nativeElement.contains(event.target)) {
this.isOpen = false;
}
}
- // ÜBERARBEITET: writeValue aktualisiert jetzt auch das sichtbare Label
+ // KORRIGIERT: writeValue setzt jetzt nur noch den Wert.
writeValue(value: any): void {
this.value = value;
- const selectedOption = this.options.find(opt => opt.value === value);
- this.selectedLabel = selectedOption ? selectedOption.label : null;
+ // Die Zeile, die `selectedLabel` gesetzt hat, wird nicht mehr benötigt.
}
registerOnChange(fn: any): void { this.onChange = fn; }
registerOnTouched(fn: any): void { this.onTouched = fn; }
setDisabledState?(isDisabled: boolean): void { this.disabled = isDisabled; }
- // NEU: Methode zum Öffnen/Schließen des Menüs
- // ÜBERARBEITET: Nimmt das Event entgegen und stoppt es
toggleDropdown(event: MouseEvent): void {
- event.stopPropagation(); // <-- WICHTIGSTE KORREKTUR
+ event.stopPropagation();
if (!this.disabled) {
this.isOpen = !this.isOpen;
- if (!this.isOpen) {
- this.onTouched();
- }
+ if (!this.isOpen) { this.onTouched(); }
}
}
- // ÜBERARBEITET: Nimmt das Event entgegen und stoppt es
+ // KORRIGIERT: selectOption setzt jetzt nur noch den Wert.
selectOption(option: SelectOption, event: MouseEvent): void {
- event.stopPropagation(); // <-- WICHTIGE KORREKTUR
+ event.stopPropagation();
if (!this.disabled) {
this.value = option.value;
- this.selectedLabel = option.label;
+ // Die Zeile, die `selectedLabel` gesetzt hat, wird nicht mehr benötigt.
this.onChange(this.value);
this.onTouched();
this.isOpen = false;