Submit form on enter for select and radio; Fix radio form association (…

…public-ui#6326)
Chrisdo82 · May 2, 2024 · 6865812 · 6865812
2 parents 5380434 + 6fbc654
commit 6865812
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 45 deletions.
diff --git a/packages/components/src/components/input-adapter-leanup/associated.controller.ts b/packages/components/src/components/input-adapter-leanup/associated.controller.ts
@@ -169,6 +169,13 @@ export class AssociatedInputController implements Watches {
 						});
 					}
 					break;
+				case 'radio':
+					if (typeof strValue === 'string') {
+						associatedElement.setAttribute('value', strValue);
+						associatedElement.setAttribute('checked', '');
+						associatedElement.value = strValue;
+					}
+					break;
 				default:
 					if (typeof strValue === 'string') {
 						associatedElement.setAttribute('value', strValue);

diff --git a/packages/components/src/components/input-radio/component.tsx b/packages/components/src/components/input-radio/component.tsx
@@ -26,6 +26,7 @@ import { InputRadioController } from './controller';
 import type { JSX } from '@stencil/core';
 import { FormFieldMsg } from '../@shared/form-field-msg';
 import { KolInputTag } from '../../core/component-names';
+import { propagateSubmitEventToForm } from '../form/controller';
 
 /**
  * @slot - Die Legende/Überschrift der Radiobuttons.
@@ -41,7 +42,10 @@ export class KolInputRadio implements InputRadioAPI {
 	@Element() private readonly host?: HTMLKolInputRadioElement;
 	private currentValue?: StencilUnknown;
 
+	private ref?: HTMLInputElement;
+
 	private readonly catchRef = (ref?: HTMLInputElement) => {
+		this.ref = ref;
 		propagateFocus(this.host, ref);
 	};
 
@@ -127,9 +131,10 @@ export class KolInputRadio implements InputRadioAPI {
 										tabIndex={this.state._tabIndex}
 										value={`-${index}`}
 										{...this.controller.onFacade}
-										onInput={this.onInput}
 										onChange={this.onChange}
 										onClick={undefined} // onClick is not needed since onChange already triggers the correct event
+										onInput={this.onInput}
+										onKeyDown={this.onKeyDown.bind(this)}
 									/>
 									<label
 										class="radio-label"
@@ -418,4 +423,13 @@ export class KolInputRadio implements InputRadioAPI {
 			}
 		}
 	};
+
+	private readonly onKeyDown = (event: KeyboardEvent) => {
+		if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+			propagateSubmitEventToForm({
+				form: this.host,
+				ref: this.ref,
+			});
+		}
+	};
 }
diff --git a/packages/components/src/components/select/component.tsx b/packages/components/src/components/select/component.tsx
@@ -19,16 +19,17 @@ import type {
 	W3CInputValue,
 } from '../../schema';
 import { propagateFocus, showExpertSlot } from '../../schema';
+import type { JSX } from '@stencil/core';
 import { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
 import { getRenderStates } from '../input/controller';
 import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';
 import { SelectController } from './controller';
-
-import type { JSX } from '@stencil/core';
 import { KolInputTag } from '../../core/component-names';
+import { propagateSubmitEventToForm } from '../form/controller';
+
 const isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {
 	return Array.isArray(valueList) && valueList.includes(optionValue);
 };
@@ -124,49 +125,60 @@ export class KolSelect implements SelectAPI {
 						)}
 					</span>
 					<div slot="input">
-						<select
-							ref={this.catchRef}
-							title=""
-							accessKey={this.state._accessKey}
-							aria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}
-							aria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}
-							autoCapitalize="off"
-							autoCorrect="off"
-							disabled={this.state._disabled}
-							id={this.state._id}
-							multiple={this.state._multiple}
-							name={this.state._name}
-							required={this.state._required}
-							size={this.state._rows}
-							spellcheck="false"
-							{...this.controller.onFacade}
-							onInput={this.onInput.bind(this)}
-							onChange={this.onChange.bind(this)}
+						<form
+							onSubmit={(event) => {
+								event.preventDefault();
+								propagateSubmitEventToForm({
+									form: this.host,
+									ref: this.ref,
+								});
+							}}
 						>
-							{this.state._options.map((option, index) => {
-								/**
-								 * Damit der Value einer Option ein beliebigen Typ haben kann
-								 * muss man auf HTML-Ebene den Value auf einen String-Wert
-								 * mappen. Das tun wir mittels der Map.
-								 */
-								const key = `-${index}`;
-								if (Array.isArray((option as unknown as Optgroup<string>).options)) {
-									return this.renderOptgroup(option as unknown as Optgroup<string>, key);
-								} else {
-									return (
-										<option
-											disabled={option.disabled}
-											key={key}
-											// label={option.label}
-											selected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}
-											value={key}
-										>
-											{option.label}
-										</option>
-									);
-								}
-							})}
-						</select>
+							<input type="submit" hidden />
+							<select
+								ref={this.catchRef}
+								title=""
+								accessKey={this.state._accessKey}
+								aria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}
+								aria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}
+								autoCapitalize="off"
+								autoCorrect="off"
+								disabled={this.state._disabled}
+								id={this.state._id}
+								multiple={this.state._multiple}
+								name={this.state._name}
+								required={this.state._required}
+								size={this.state._rows}
+								spellcheck="false"
+								{...this.controller.onFacade}
+								onInput={this.onInput.bind(this)}
+								onChange={this.onChange.bind(this)}
+							>
+								{this.state._options.map((option, index) => {
+									/**
+									 * Damit der Value einer Option ein beliebigen Typ haben kann
+									 * muss man auf HTML-Ebene den Value auf einen String-Wert
+									 * mappen. Das tun wir mittels der Map.
+									 */
+									const key = `-${index}`;
+									if (Array.isArray((option as unknown as Optgroup<string>).options)) {
+										return this.renderOptgroup(option as unknown as Optgroup<string>, key);
+									} else {
+										return (
+											<option
+												disabled={option.disabled}
+												key={key}
+												// label={option.label}
+												selected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}
+												value={key}
+											>
+												{option.label}
+											</option>
+										);
+									}
+								})}
+							</select>
+						</form>
 					</div>
 				</KolInputTag>
 			</Host>