- Possible fix for Inline validation messages on field lose focus eve…

packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateItem/CustomDateField.tsx

@@ -37,6 +37,7 @@ interface CustomDateFieldProps extends PropsWithIsTabledRequiredAttribute {
   isPartOfDateTime: boolean;
   setFocused: Dispatch<SetStateAction<boolean>>;
   onInputChange: (newInput: string) => void;
+  onDateBlur: () => void;
   onSelectDate: (newDateValue: string) => void;
 }
 
@@ -55,6 +56,7 @@ function CustomDateField(props: CustomDateFieldProps) {
     isTabled,
     setFocused,
     onInputChange,
+    onDateBlur,
     onSelectDate
   } = props;
 
@@ -83,7 +85,10 @@ function CustomDateField(props: CustomDateFieldProps) {
         size="small"
         focused={isFocused}
         onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
+        onBlur={() => {
+          onDateBlur();
+          setFocused(false);
+        }}
         slotProps={{
           input: {
             readOnly: readOnly && readOnlyVisualStyle === 'readonly',

packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateItem/CustomDateItem.tsx

@@ -30,6 +30,7 @@ import useDateValidation from '../../../../hooks/useDateValidation';
 import CustomDateField from './CustomDateField';
 import { useQuestionnaireStore } from '../../../../stores';
 import ItemLabel from '../../ItemParts/ItemLabel';
+import useShowFeedback from '../../../../hooks/useShowFeedback';
 
 interface CustomDateItemProps extends BaseItemProps {}
 
@@ -52,7 +53,6 @@ function CustomDateItem(props: CustomDateItemProps) {
   // Init input value
   const answerKey = qrItem?.answer?.[0]?.id;
   const qrDate = qrItem ?? createEmptyQrItem(qItem, answerKey);
-
   let valueDate: string = '';
   if (qrDate.answer) {
     if (qrDate.answer[0].valueDate) {
@@ -70,6 +70,9 @@ function CustomDateItem(props: CustomDateItemProps) {
   // Perform validation checks
   const errorFeedback = useDateValidation(input, dateParseFail);
 
+  // Provides a way to hide the feedback when the user is typing
+  const { showFeedback, setShowFeedback, hasBlurred, setHasBlurred } = useShowFeedback();
+
   function handleSelectDate(selectedDate: string) {
     setInput(selectedDate);
     onQrItemChange({
@@ -81,10 +84,14 @@ function CustomDateItem(props: CustomDateItemProps) {
   function handleInputChange(newInput: string) {
     setInput(newInput);
 
+    // Only suppress feedback once (before first blur)
+    if (!hasBlurred) {
+      setShowFeedback(false);
+    }
+
     if (newInput === '') {
       onQrItemChange(createEmptyQrItem(qItem, answerKey));
     }
-
     if (!validateDateInput(newInput)) {
       return;
     }
@@ -95,14 +102,19 @@ function CustomDateItem(props: CustomDateItemProps) {
     });
   }
 
+  function handleDateBlur() {
+    setShowFeedback(true);
+    setHasBlurred(true); // From now on, feedback should stay visible
+  }
+
   if (isRepeated) {
     return (
       <CustomDateField
         linkId={qItem.linkId}
         itemType={qItem.type}
         valueDate={displayDate}
         input={input}
-        feedback={errorFeedback ?? ''}
+        feedback={showFeedback ? (errorFeedback ?? '') : ''}
         isFocused={focused}
         displayPrompt={displayPrompt}
         entryFormat={entryFormat}
@@ -111,6 +123,7 @@ function CustomDateItem(props: CustomDateItemProps) {
         isTabled={isTabled}
         setFocused={setFocused}
         onInputChange={handleInputChange}
+        onDateBlur={handleDateBlur}
         onSelectDate={handleSelectDate}
       />
     );
@@ -131,7 +144,7 @@ function CustomDateItem(props: CustomDateItemProps) {
             itemType={qItem.type}
             valueDate={displayDate}
             input={input}
-            feedback={errorFeedback ?? ''}
+            feedback={showFeedback ? (errorFeedback ?? '') : ''}
             isFocused={focused}
             displayPrompt={displayPrompt}
             entryFormat={entryFormat}
@@ -140,6 +153,7 @@ function CustomDateItem(props: CustomDateItemProps) {
             isTabled={isTabled}
             setFocused={setFocused}
             onInputChange={handleInputChange}
+            onDateBlur={handleDateBlur}
             onSelectDate={handleSelectDate}
           />
         }

packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomDateTimeItem.tsx

@@ -37,6 +37,7 @@ import useTimeValidation from '../../../../hooks/useTimeValidation';
 import useDateNonEmptyValidation from '../../../../hooks/useDateTimeNonEmpty';
 import DateTimeField from './DateTimeField';
 import ItemLabel from '../../ItemParts/ItemLabel';
+import useShowFeedback from '../../../../hooks/useShowFeedback';
 
 interface CustomDateTimeItemProps extends BaseItemProps {}
 
@@ -97,6 +98,9 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
 
   dateFeedback = useDateNonEmptyValidation(dateInput, timeInput, dateFeedback, timeFeedback);
 
+  // Provides a way to hide the feedback when the user is typing
+  const { showFeedback, setShowFeedback, hasBlurred, setHasBlurred } = useShowFeedback();
+
   function handleSelectDate(selectedDate: string) {
     setDateInput(selectedDate);
     updateQRDateTime(selectedDate, timeInput, periodInput, is24HourNotation);
@@ -105,6 +109,11 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
   function handleDateInputChange(newDateInput: string) {
     setDateInput(newDateInput);
 
+    // Only suppress feedback once (before first blur)
+    if (!hasBlurred) {
+      setShowFeedback(false);
+    }
+
     if (newDateInput === '') {
       onQrItemChange(createEmptyQrItem(qItem, answerKey));
       return;
@@ -117,10 +126,20 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
     updateQRDateTime(newDateInput, timeInput, periodInput, is24HourNotation);
   }
 
+  function handleDateBlur() {
+    setShowFeedback(true);
+    setHasBlurred(true); // From now on, feedback should stay visible
+  }
+
   function handleTimeInputChange(newTimeInput: string, newPeriodInput: string) {
     setTimeInput(newTimeInput);
     setPeriodInput(newPeriodInput);
 
+    // Only suppress feedback once (before first blur)
+    if (!hasBlurred) {
+      setShowFeedback(false);
+    }
+
     if (newTimeInput === '') {
       updateQRDateTime(dateInput, '', '', false);
       return;
@@ -134,6 +153,11 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
     updateQRDateTime(dateInput, newTimeInput, newPeriodInput, is24HourNotation);
   }
 
+  function handleTimeBlur() {
+    setShowFeedback(true);
+    setHasBlurred(true); // From now on, feedback should stay visible
+  }
+
   function updateQRDateTime(
     dateInput: string,
     timeInput: string,
@@ -175,8 +199,8 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
           timeInput={timeInput}
           periodInput={periodInput}
           is24HourNotation={is24HourNotation}
-          dateFeedback={dateFeedback ?? ''}
-          timeFeedback={timeFeedback ?? ''}
+          dateFeedback={showFeedback ? (dateFeedback ?? '') : ''}
+          timeFeedback={showFeedback ? (timeFeedback ?? '') : ''}
           dateFocused={dateFocused}
           displayPrompt={displayPrompt}
           entryFormat={entryFormat}
@@ -186,6 +210,9 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
           onSelectDate={handleSelectDate}
           setDateFocused={setDateFocused}
           onTimeInputChange={handleTimeInputChange}
+          onDateBlur={handleDateBlur}
+          onTimeBlur={handleTimeBlur}
+          showFeedback={showFeedback}
         />
       </Stack>
     );
@@ -220,6 +247,9 @@ function CustomDateTimeItem(props: CustomDateTimeItemProps) {
             onSelectDate={handleSelectDate}
             setDateFocused={setDateFocused}
             onTimeInputChange={handleTimeInputChange}
+            onDateBlur={handleDateBlur}
+            onTimeBlur={handleTimeBlur}
+            showFeedback={showFeedback}
           />
         }
         dateFeedback={dateFeedback ?? undefined}

packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/CustomTimeField.tsx

@@ -39,6 +39,7 @@ interface CustomTimeFieldProps extends PropsWithIsTabledRequiredAttribute {
   isPartOfDateTime: boolean;
   onTimeInputChange: (newInput: string) => void;
   onPeriodChange: (newPeriod: string) => void;
+  onTimeBlur: () => void;
 }
 
 function CustomTimeField(props: CustomTimeFieldProps) {
@@ -54,7 +55,8 @@ function CustomTimeField(props: CustomTimeFieldProps) {
     isPartOfDateTime,
     isTabled,
     onTimeInputChange,
-    onPeriodChange
+    onPeriodChange,
+    onTimeBlur
   } = props;
 
   const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
@@ -83,6 +85,7 @@ function CustomTimeField(props: CustomTimeFieldProps) {
             fullWidth
             sx={{ flex: 1 }}
             onChange={(e: ChangeEvent<HTMLInputElement>) => onTimeInputChange(e.target.value)}
+            onBlur={onTimeBlur}
             label={displayPrompt}
             placeholder="--:--"
             disabled={readOnly && readOnlyVisualStyle === 'disabled'}
@@ -102,7 +105,8 @@ function CustomTimeField(props: CustomTimeFieldProps) {
             displayEmpty
             size="small"
             sx={{ flex: 1 }}
-            onChange={(e) => onPeriodChange(e.target.value)}>
+            onChange={(e) => onPeriodChange(e.target.value)}
+            onBlur={onTimeBlur}>
             <MenuItem value="">
               <span style={{ color: grey['500'] }}>{is24HourNotation ? '-' : 'AM/PM'}</span>
             </MenuItem>

packages/smart-forms-renderer/src/components/FormComponents/DateTimeItems/CustomDateTimeItem/DateTimeField.tsx

@@ -37,9 +37,12 @@ interface DateTimeFieldProps extends PropsWithIsTabledRequiredAttribute {
   entryFormat: string;
   readOnly: boolean;
   onDateInputChange: (newDateInput: string) => void;
+  onDateBlur: () => void;
   onSelectDate: (selectedDate: string) => void;
   setDateFocused: Dispatch<SetStateAction<boolean>>;
   onTimeInputChange: (newTimeInput: string, newPeriodInput: string) => void;
+  onTimeBlur: () => void;
+  showFeedback: boolean;
 }
 
 function DateTimeField(props: DateTimeFieldProps) {
@@ -59,9 +62,12 @@ function DateTimeField(props: DateTimeFieldProps) {
     readOnly,
     isTabled,
     onDateInputChange,
+    onDateBlur,
     onSelectDate,
     setDateFocused,
-    onTimeInputChange
+    onTimeInputChange,
+    onTimeBlur,
+    showFeedback
   } = props;
 
   return (
@@ -71,7 +77,7 @@ function DateTimeField(props: DateTimeFieldProps) {
         itemType={itemType}
         valueDate={displayDate}
         input={dateInput}
-        feedback={dateFeedback ?? ''}
+        feedback={showFeedback ? (dateFeedback ?? '') : ''}
         isFocused={dateFocused}
         displayPrompt={displayPrompt}
         entryFormat={entryFormat}
@@ -80,6 +86,7 @@ function DateTimeField(props: DateTimeFieldProps) {
         isTabled={isTabled}
         setFocused={setDateFocused}
         onInputChange={onDateInputChange}
+        onDateBlur={onDateBlur}
         onSelectDate={onSelectDate}
       />
       <CustomTimeField
@@ -88,13 +95,14 @@ function DateTimeField(props: DateTimeFieldProps) {
         timeInput={timeInput}
         periodInput={periodInput}
         is24HourNotation={is24HourNotation}
-        feedback={timeFeedback ?? ''}
+        feedback={showFeedback ? (timeFeedback ?? '') : ''}
         displayPrompt={displayPrompt}
         readOnly={readOnly}
         isPartOfDateTime={true}
         isTabled={isTabled}
         onTimeInputChange={(newTimeInput) => onTimeInputChange(newTimeInput, periodInput)}
         onPeriodChange={(newPeriodInput) => onTimeInputChange(timeInput, newPeriodInput)}
+        onTimeBlur={onTimeBlur}
       />
     </Stack>
   );

packages/smart-forms-renderer/src/components/FormComponents/DecimalItem/DecimalField.tsx

@@ -34,6 +34,7 @@ interface DecimalFieldProps extends PropsWithIsTabledRequiredAttribute {
   readOnly: boolean;
   calcExpUpdated: boolean;
   onInputChange: (value: string) => void;
+  onBlur: () => void;
 }
 
 function DecimalField(props: DecimalFieldProps) {
@@ -48,7 +49,8 @@ function DecimalField(props: DecimalFieldProps) {
     readOnly,
     calcExpUpdated,
     isTabled,
-    onInputChange
+    onInputChange,
+    onBlur
   } = props;
 
   const readOnlyVisualStyle = useRendererStylingStore.use.readOnlyVisualStyle();
@@ -60,6 +62,7 @@ function DecimalField(props: DecimalFieldProps) {
       value={input}
       error={!!feedback}
       onChange={(event) => onInputChange(event.target.value)}
+      onBlur={onBlur}
       disabled={readOnly && readOnlyVisualStyle === 'disabled'}
       label={displayPrompt}
       placeholder={entryFormat === '' ? '0.0' : entryFormat}

packages/smart-forms-renderer/src/components/FormComponents/DecimalItem/DecimalItem.tsx

@@ -35,6 +35,7 @@ import useReadOnly from '../../../hooks/useReadOnly';
 import { useQuestionnaireStore } from '../../../stores';
 import Box from '@mui/material/Box';
 import ItemLabel from '../ItemParts/ItemLabel';
+import useShowFeedback from '../../../hooks/useShowFeedback';
 
 interface DecimalItemProps extends BaseItemProps {
   qItem: QuestionnaireItem;
@@ -81,6 +82,9 @@ function DecimalItem(props: DecimalItemProps) {
   // Perform validation checks - there's no string-based input here
   const feedback = useValidationFeedback(qItem, feedbackFromParent, input);
 
+  // Provides a way to hide the feedback when the user is typing
+  const { showFeedback, setShowFeedback, hasBlurred, setHasBlurred } = useShowFeedback();
+
   // Process calculated expressions
   const { calcExpUpdated } = useDecimalCalculatedExpression({
     qItem: qItem,
@@ -108,9 +112,20 @@ function DecimalItem(props: DecimalItemProps) {
     const parsedNewInput: string = parseDecimalStringWithPrecision(newInput, precision);
 
     setInput(parsedNewInput);
+
+    // Only suppress feedback once (before first blur)
+    if (!hasBlurred) {
+      setShowFeedback(false);
+    }
+
     updateQrItemWithDebounce(parsedNewInput);
   }
 
+  function handleBlur() {
+    setShowFeedback(true);
+    setHasBlurred(true); // From now on, feedback should stay visible
+  }
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const updateQrItemWithDebounce = useCallback(
     debounce((parsedNewInput: string) => {
@@ -149,6 +164,7 @@ function DecimalItem(props: DecimalItemProps) {
           calcExpUpdated={calcExpUpdated}
           isTabled={isTabled}
           onInputChange={handleInputChange}
+          onBlur={handleBlur}
         />
       </Box>
     );
@@ -168,14 +184,15 @@ function DecimalItem(props: DecimalItemProps) {
             linkId={qItem.linkId}
             itemType={qItem.type}
             input={input}
-            feedback={feedback}
+            feedback={showFeedback ? feedback : ''}
             displayPrompt={displayPrompt}
             displayUnit={displayUnit}
             entryFormat={entryFormat}
             readOnly={readOnly}
             calcExpUpdated={calcExpUpdated}
             isTabled={isTabled}
             onInputChange={handleInputChange}
+            onBlur={handleBlur}
           />
         }
         feedback={feedback}