use CustomEvent to include name in event details

Refs: #7374
public-ui · Mar 5, 2025 · 99ace73 · 99ace73
1 parent 802395d
commit 99ace73
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 8 deletions.
diff --git a/packages/components/src/components/combobox/shadow.tsx b/packages/components/src/components/combobox/shadow.tsx
@@ -76,8 +76,8 @@ export class KolCombobox implements ComboboxAPI {
 	};
 
 	private selectOption(option: string) {
-		this.controller.onFacade.onInput(new Event('input', { bubbles: true }), true, option);
-		this.controller.onFacade.onChange(new Event('change', { bubbles: true }), option);
+		this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option } }), true, option);
+		this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option } }), option);
 		this.controller.setFormAssociatedValue(option);
 		this.state._value = option;
 		this.refInput?.focus();

diff --git a/packages/components/src/components/single-select/shadow.tsx b/packages/components/src/components/single-select/shadow.tsx
@@ -95,18 +95,16 @@ export class KolSingleSelect implements SingleSelectAPI {
 			this.state._value = emptyValue;
 			this._inputValue = emptyValue;
 			this._filteredOptions = [...this.state._options];
-			this.controller.onFacade.onInput(new Event('input', { bubbles: true }), true, emptyValue);
-			this.controller.onFacade.onChange(new Event('change', { bubbles: true }), emptyValue);
+			this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), true, emptyValue);
+			this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: emptyValue } }), emptyValue);
 		}
 	}
 
 	private selectOption(option: Option<string>) {
 		this.state._value = option.value;
 		this._inputValue = option.label as string;
-
-		this.controller.onFacade.onInput(new Event('input', { bubbles: true }), false, option.value);
-		this.controller.onFacade.onChange(new Event('change', { bubbles: true }), option.value);
-
+		this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option.value } }), false, option.value);
+		this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option.value } }), option.value);
 		this._filteredOptions = [...this.state._options];
 
 		this.controller.setFormAssociatedValue(this.state._value);