fix: value handling for inputs (#6110)

public-ui · Feb 23, 2024 · 62bbb5f · 62bbb5f
2 parents 2eeb31a + 70c8244
commit 62bbb5f
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -2438,7 +2438,7 @@ export namespace Components {
         "collapse": () => Promise<void>;
         "expand": () => Promise<void>;
         "focusLink": () => Promise<void>;
-        "isOpen": () => Promise<boolean>;
+        "isOpen": () => Promise<any>;
     }
     interface KolTreeItemWc {
         /**
@@ -2460,7 +2460,7 @@ export namespace Components {
         "collapse": () => Promise<void>;
         "expand": () => Promise<void>;
         "focusLink": () => Promise<void>;
-        "isOpen": () => Promise<boolean>;
+        "isOpen": () => Promise<any>;
     }
     interface KolTreeWc {
         /**

diff --git a/packages/components/src/components/input-adapter-leanup/associated.controller.ts b/packages/components/src/components/input-adapter-leanup/associated.controller.ts
@@ -10,7 +10,24 @@ type OptionalProps = {
 type Props = Generic.Element.Members<RequiredProps, OptionalProps>;
 type Watches = Generic.Element.Watchers<RequiredProps, OptionalProps>;
 
-const isAssociatedTagName = (name?: string): boolean => name === 'KOL-BUTTON' || name === 'KOL-INPUT' || name === 'KOL-SELECT' || name === 'KOL-TEXTAREA';
+type HTMLInputFileElement = HTMLInputElement & {
+	files: FileList;
+};
+
+const isAssociatedTagName = (name?: string): boolean =>
+	name === 'KOL-BUTTON' ||
+	name === 'KOL-INPUT-CHECKBOX' ||
+	name === 'KOL-INPUT-COLOR' ||
+	name === 'KOL-INPUT-DATE' ||
+	name === 'KOL-INPUT-EMAIL' ||
+	name === 'KOL-INPUT-FILE' ||
+	name === 'KOL-INPUT-NUMBER' ||
+	name === 'KOL-INPUT-PASSWORD' ||
+	name === 'KOL-INPUT-RADIO' ||
+	name === 'KOL-INPUT-RANGE' ||
+	name === 'KOL-INPUT-TEXT' ||
+	name === 'KOL-SELECT' ||
+	name === 'KOL-TEXTAREA';
 
 export class AssociatedInputController implements Watches {
 	private readonly experimentalMode = getExperimentalMode();
@@ -27,13 +44,12 @@ export class AssociatedInputController implements Watches {
 		this.host = this.findHostWithShadowRoot(host);
 		this.type = type;
 
-		if (getExperimentalMode() && isAssociatedTagName(this.host?.tagName)) {
+		if (this.experimentalMode && isAssociatedTagName(this.host?.tagName)) {
 			this.host?.querySelectorAll('input,select,textarea').forEach((el) => {
 				this.host?.removeChild(el);
 			});
 			switch (this.type) {
 				case 'button':
-				case 'checkbox':
 				case 'color':
 				case 'date':
 				case 'email':
@@ -53,6 +69,7 @@ export class AssociatedInputController implements Watches {
 				case 'textarea':
 					this.formAssociated = document.createElement('textarea');
 					break;
+				case 'checkbox': // Checkbox use default case
 				default:
 					this.formAssociated = document.createElement('input');
 					this.formAssociated.setAttribute('type', 'hidden');
@@ -133,6 +150,9 @@ export class AssociatedInputController implements Watches {
 	) {
 		if (associatedElement) {
 			switch (this.type) {
+				case 'file':
+					(associatedElement as HTMLInputFileElement).files = rawValue as FileList;
+					break;
 				case 'select':
 					(associatedElement as HTMLSelectElement).querySelectorAll('option').forEach((el) => {
 						(associatedElement as HTMLSelectElement).removeChild(el);

diff --git a/packages/samples/react/src/scenarios/static-form.tsx b/packages/samples/react/src/scenarios/static-form.tsx
@@ -47,6 +47,7 @@ export const StaticForm: FC = () => {
 				<KolInputDate _name="date" _label="Date" />
 				<KolInputEmail _name="email" _label="Email" />
 				<KolInputFile _name="file" _label="File" />
+				<KolInputFile _name="file" _label="Files (multiple)" _multiple />
 				<KolInputNumber _name="number" _label="Number" />
 				<KolInputPassword _name="password" _label="Password" />
 				<KolInputRadio
@@ -67,7 +68,17 @@ export const StaticForm: FC = () => {
 						{ label: 'Option B', value: 'B' },
 					]}
 				/>
-				<KolTextarea _name="textarea" _label="Textarea" />
+				<KolSelect
+					_name="select"
+					_label="Select (multiple)"
+					_multiple
+					_options={[
+						{ label: 'Option A', value: 'A' },
+						{ label: 'Option B', value: 'B' },
+					]}
+					_rows={2}
+				/>
+				<KolTextarea _name="textarea" _label="Textarea" _rows={5} />
 				<div className="flex flex-wrap gap-4">
 					<KolButton _label="Submit" _type="submit" _variant="primary" />
 					<KolButton _label="Reset" _type="reset" />