Fix wrong event in single-select and combobox and use CustomEvent to …

…include name in event details Refs: #7374
public-ui · Mar 5, 2025 · 581a0fe · 581a0fe
1 parent 1ac6071
commit 581a0fe
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 14 deletions.
diff --git a/packages/components/src/components/combobox/shadow.tsx b/packages/components/src/components/combobox/shadow.tsx
@@ -29,6 +29,7 @@ import KolInputContainerFc from '../../functional-component-wrappers/InputContai
 import CustomSuggestionsToggleFc from '../../functional-components/CustomSuggestionsToggle';
 import CustomSuggestionsOptionFc from '../../functional-components/CustomSuggestionsOption/CustomSuggestionsOption';
 import CustomSuggestionsOptionsGroupFc from '../../functional-components/CustomSuggestionsOptionsGroup';
+import { EventDetail } from '../../schema/interfaces/EventDetail';
 
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
@@ -77,9 +78,16 @@ export class KolCombobox implements ComboboxAPI {
 		this.refInput = ref;
 	};
 
-	private selectOption(event: Event, option: string) {
-		this.controller.onFacade.onInput(event, true, option);
-		this.controller.onFacade.onChange(event, option);
+	private selectOption(option: string) {
+		this.controller.onFacade.onInput(
+			new CustomEvent<EventDetail>('input', { bubbles: true, detail: { name: this.state._name as string, value: option } }),
+			true,
+			option,
+		);
+		this.controller.onFacade.onChange(
+			new CustomEvent<EventDetail>('change', { bubbles: true, detail: { name: this.state._name as string, value: option } }),
+			option,
+		);
 		this.controller.setFormAssociatedValue(option);
 		this.state._value = option;
 		this.refInput?.focus();
@@ -224,8 +232,8 @@ export class KolCombobox implements ComboboxAPI {
 											if (el) this.refSuggestions[index] = el;
 										}}
 										selected={this.state._value === option}
-										onClick={(e) => {
-											this.selectOption(e, option as string);
+										onClick={() => {
+											this.selectOption(option as string);
 											this.toggleListbox();
 										}}
 										onMouseOver={() => {
@@ -238,7 +246,7 @@ export class KolCombobox implements ComboboxAPI {
 										}}
 										onKeyDown={(e) => {
 											if (e.key === 'Enter' || e.key === 'NumpadEnter') {
-												this.selectOption(e, option as string);
+												this.selectOption(option as string);
 												this.toggleListbox();
 												e.preventDefault();
 											}

diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx
@@ -31,6 +31,7 @@ import CustomSuggestionsToggleFc from '../../functional-components/CustomSuggest
 import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
 import KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';
 import KolInputStateWrapperFc from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';
+import { EventDetail } from '../../schema/interfaces/EventDetail';
 
 /**
  * @slot - The input field label.
@@ -99,16 +100,30 @@ export class KolSingleSelect implements SingleSelectAPI {
 			this._inputValue = emptyValue;
 			this._filteredOptions = [...this.state._options];
 
-			this.controller.onFacade.onInput(new Event('input'), true, emptyValue);
-			this.controller.onFacade.onChange(new Event('change'), emptyValue);
+			this.controller.onFacade.onInput(
+				new CustomEvent<EventDetail>('input', { bubbles: true, detail: { name: this.state._name as string, value: emptyValue } }),
+				true,
+				emptyValue,
+			);
+			this.controller.onFacade.onChange(
+				new CustomEvent<EventDetail>('change', { bubbles: true, detail: { name: this.state._name as string, value: emptyValue } }),
+				emptyValue,
+			);
 		}
 	}
 
-	private selectOption(event: Event, option: Option<string>) {
+	private selectOption(option: Option<string>) {
 		this._value = option.value;
 		this._inputValue = option.label as string;
-		this.controller.onFacade.onInput(event, false, option.value);
-		this.controller.onFacade.onChange(event, option.value);
+		this.controller.onFacade.onInput(
+			new CustomEvent<EventDetail>('input', { bubbles: true, detail: { name: this.state._name as string, value: option.value } }),
+			false,
+			option.value,
+		);
+		this.controller.onFacade.onChange(
+			new CustomEvent<EventDetail>('change', { bubbles: true, detail: { name: this.state._name as string, value: option.value } }),
+			option.value,
+		);
 
 		this._filteredOptions = [...this.state._options];
 
@@ -259,7 +274,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 										}}
 										selected={this._value === (option as Option<string>).value}
 										onClick={(event: Event) => {
-											this.selectOption(event, option as Option<string>);
+											this.selectOption(option as Option<string>);
 											this.refInput?.focus();
 											this.toggleListbox(event);
 										}}
@@ -275,7 +290,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 										}}
 										onKeyDown={(e) => {
 											if (e.key === 'Enter' || e.key === 'NumpadEnter') {
-												this.selectOption(e, option as Option<string>);
+												this.selectOption(option as Option<string>);
 												this.refInput?.focus();
 												this.toggleListbox(e);
 												e.preventDefault();
@@ -347,7 +362,7 @@ export class KolSingleSelect implements SingleSelectAPI {
 			case ' ': {
 				if (this._isOpen) {
 					if (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {
-						this.selectOption(event, this._filteredOptions[this._focusedOptionIndex] as Option<string>);
+						this.selectOption(this._filteredOptions[this._focusedOptionIndex] as Option<string>);
 						this.refInput?.focus();
 						handleEvent(false);
 					}

diff --git a/packages/components/src/schema/interfaces/EventDetail.ts b/packages/components/src/schema/interfaces/EventDetail.ts
@@ -0,0 +1,4 @@
+export interface EventDetail {
+	name: string;
+	value: string;
+}