fix: handle form submit and novalidate (#6123)

public-ui · Feb 26, 2024 · d76e3c1 · d76e3c1
2 parents d056d92 + b643ab2
commit d76e3c1
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/packages/components/src/components/form/controller.ts b/packages/components/src/components/form/controller.ts
@@ -77,7 +77,16 @@ export const propagateSubmitEventToForm = (
 		if (form.tagName === 'FORM') {
 			setEventTarget(event, form);
 			form.dispatchEvent(event);
-			(form as HTMLFormElement).submit();
+			if (getExperimentalMode() && (form as HTMLFormElement).noValidate === false) {
+				devHint(`If you have not focusable or hidden form fields in your form, you should enable noValidate for your form.`, {
+					force: true,
+				});
+				// (form as HTMLFormElement).noValidate = true; do not make this implicit
+			}
+			if (typeof (form as HTMLFormElement).requestSubmit === 'function') {
+				// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit
+				(form as HTMLFormElement).requestSubmit();
+			}
 		} else if (form.tagName === 'KOL-FORM') {
 			setEventTarget(event, KoliBriDevHelper.querySelector('form', form) as HTMLFormElement);
 			const kolForm = form as Props;

diff --git a/packages/components/src/utils/a11y.tipps.ts b/packages/components/src/utils/a11y.tipps.ts
@@ -11,6 +11,7 @@ export const a11yHint = (msg: string, options?: HintOptions): void => {
 		a11yCache.add(msg);
 		Log.debug(([msg] as unknown[]).concat(options?.details || []), {
 			classifier: `✋ a11y`,
+			forceLog: !!options?.force,
 			overwriteStyle: '; background-color: #09f',
 		});
 	}
@@ -22,6 +23,7 @@ export const deprecatedHint = (msg: string, options?: HintOptions): void => {
 		deprecatedCache.add(msg);
 		Log.warn(([msg] as unknown[]).concat(options?.details || []), {
 			classifier: `🔥 deprecated`,
+			forceLog: !!options?.force,
 			overwriteStyle: '; background-color: #f00',
 		});
 	}
@@ -33,6 +35,7 @@ export const devHint = (msg: string, options?: HintOptions): void => {
 		devCache.add(msg);
 		Log.debug(([msg] as unknown[]).concat(options?.details || []), {
 			classifier: `💻 dev`,
+			forceLog: !!options?.force,
 			overwriteStyle: '; background-color: #f09',
 		});
 	}
@@ -41,7 +44,8 @@ export const devWarning = (msg: string, options?: HintOptions): void => {
 	if (devCache.has(msg) === false || !!options?.force) {
 		devCache.add(msg);
 		Log.warn(([msg] as unknown[]).concat(options?.details || []), {
-			classifier: `💻 dev`,
+			classifier: `⚠️ dev`,
+			forceLog: !!options?.force,
 			overwriteStyle: '; background-color: #f09',
 		});
 	}
@@ -54,6 +58,7 @@ export const featureHint = (msg: string, done = false, options?: HintOptions): v
 		msg += done === true ? ' ✅' : '';
 		Log.debug(([msg] as unknown[]).concat(options?.details || []), {
 			classifier: `🌟 feature`,
+			forceLog: !!options?.force,
 			overwriteStyle: '; background-color: #309',
 		});
 	}
@@ -68,6 +73,7 @@ export const uiUxHint = (msg: string, options?: HintOptions): void => {
 		uiUxCache.add(msg);
 		Log.debug(([msg] as unknown[]).concat(options?.details || []), {
 			classifier: `📑 ui/ux`,
+			forceLog: !!options?.force,
 			overwriteStyle: '; background-color: #060;',
 		});
 	}

diff --git a/packages/samples/react/src/scenarios/static-form.tsx b/packages/samples/react/src/scenarios/static-form.tsx
@@ -41,7 +41,7 @@ export const StaticForm: FC = () => {
 					</li>
 				</ol>
 			</SampleDescription>
-			<form className="grid gap-4" method="get">
+			<form className="grid gap-4" method="get" noValidate>
 				<KolInputCheckbox _name="checkbox" _label="Checkbox" />
 				<KolInputColor _name="color" _label="Color" />
 				<KolInputDate _name="date" _label="Date" />