From 3f35a0e390fee7a875eaf8922b28ac560293ae59 Mon Sep 17 00:00:00 2001
From: Martin Oppitz <6279703+deleonio@users.noreply.github.com>
Date: Sun, 24 Nov 2024 17:24:57 +0100
Subject: [PATCH] refactor: update InputController validation logic and
 initialize state in InputDateShowHideMsg component

Refs: #6977
---
 .../@deprecated/input/controller.ts           |  5 +-
 .../components/input-date/show-hide-msg.tsx   | 64 +++++++++----------
 2 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/packages/components/src/components/@deprecated/input/controller.ts b/packages/components/src/components/@deprecated/input/controller.ts
index 814c27435e..015bf25cb5 100644
--- a/packages/components/src/components/@deprecated/input/controller.ts
+++ b/packages/components/src/components/@deprecated/input/controller.ts
@@ -162,7 +162,10 @@ export class InputController extends ControlledInputController implements Watche
 		this.validateAccessKey(this.component._accessKey);
 		this.validateAdjustHeight(this.component._adjustHeight);
 		this.validateError(this.component._error);
-		this.validateMsg(this.component._msg);
+		// _msg should only override _error if it is also defined.
+		if (this.component._msg) {
+			this.validateMsg(this.component._msg);
+		}
 		this.validateDisabled(this.component._disabled);
 		this.validateHideError(this.component._hideError);
 		this.validateHideLabel(this.component._hideLabel);
diff --git a/packages/samples/react/src/components/input-date/show-hide-msg.tsx b/packages/samples/react/src/components/input-date/show-hide-msg.tsx
index ffe564d43b..2527606d66 100644
--- a/packages/samples/react/src/components/input-date/show-hide-msg.tsx
+++ b/packages/samples/react/src/components/input-date/show-hide-msg.tsx
@@ -11,8 +11,8 @@ function onGenerator(setter: (cb: (b: boolean) => boolean) => void) {
 }
 
 export const InputDateShowHideMsg = () => {
-	const [showMsg, setShowMsg] = useState(false);
-	const [isTouched, setIsTouched] = useState(false);
+	const [showMsg, setShowMsg] = useState(true);
+	const [isTouched, setIsTouched] = useState(true);
 	const [hideMsg, setHideMsg] = useState(false);
 
 	const onMsg = onGenerator(setShowMsg);
@@ -25,39 +25,35 @@ export const InputDateShowHideMsg = () => {
 				<p>This example shows how messages work in input fields.</p>
 			</SampleDescription>
 
-			<div className="flex gap-4 items-center">
-				<KolButton _label="Toggle Msg" _type="button" _on={onMsg} />
-				<KolButton _label="Toggle Touched" _type="button" _on={onTouched} />
-				<KolButton _label="Toggle Hide Msg" _type="button" _on={onHideMsg} />
+			<div className="flex gap-4 flex-col">
+				<div className="flex gap-4 items-center">
+					<KolButton _label="Toggle Msg" _type="button" _on={onMsg} />
+					<KolButton _label="Toggle Touched" _type="button" _on={onTouched} />
+					<KolButton _label="Toggle Hide Msg" _type="button" _on={onHideMsg} />
+				</div>
+				<pre>
+					Message exists: {showMsg && isTouched ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'}, isTouched: {isTouched ? 'Yes' : 'No'})<br />
+					Message visible: {showMsg && isTouched && !hideMsg ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'}, isTouched: {isTouched ? 'Yes' : 'No'}, hideMsg:{' '}
+					{hideMsg ? 'Yes' : 'No'})
+				</pre>
+				<KolInputDate _error={showMsg ? 'error message' : undefined} _hideError={hideMsg} _label="Date (_error)" _touched={isTouched} />
+				{msgTypes.map((type) => (
+					<KolInputDate
+						key={type}
+						_hideError={hideMsg}
+						_label={`Date (_msg, ${type})`}
+						_msg={
+							showMsg
+								? {
+										_description: `${type} message`,
+										_type: type,
+									}
+								: undefined
+						}
+						_touched={isTouched}
+					/>
+				))}
 			</div>
-			<br />
-			<hr />
-			<br />
-			<pre>
-				Message exists: {showMsg && isTouched ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'}, isTouched: {isTouched ? 'Yes' : 'No'})<br />
-				Message visible: {showMsg && isTouched && !hideMsg ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'}, isTouched: {isTouched ? 'Yes' : 'No'}, hideMsg:{' '}
-				{hideMsg ? 'Yes' : 'No'})
-			</pre>
-			<br />
-			<hr />
-			<br />
-			<KolInputDate _error={showMsg ? 'error message' : undefined} _hideError={hideMsg} _label="Date (_error)" _touched={isTouched} />
-			{msgTypes.map((type) => (
-				<KolInputDate
-					key={type}
-					_hideError={hideMsg}
-					_label="Date (_msg)"
-					_msg={
-						showMsg
-							? {
-									_description: `${type} message`,
-									_type: type,
-								}
-							: undefined
-					}
-					_touched={isTouched}
-				/>
-			))}
 		</>
 	);
 };