v2.4.2

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 Pre-release versions will not be mentioned here.
 
+## [2.4.2] - 2025-04-27
+
+### Fixed
+
+- `RruDateTimeInput`: Fixed validation would trigger even before touching the field.
+
+## Other
+
+- Internal enhancements.
+
 ## [2.4.1] - 2024-11-02
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rich-ui",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "React UI framework with lots of built-in UI components (forms, data table, steps wizards, etc...)",
   "keywords": [
     "React",

src/form/RruDateTimeInput/RruDateTimeInput.tsx

@@ -50,7 +50,7 @@ const RruDateTimeInput: FC<RruDateTimeInputProps> = (props) => {
   const popupRef = useDetectClickOutside({
     onTriggered: (e) => {
       if (e.target != inputRef.current) {
-        closePopup();
+        setIsPopupShown(false);
       }
     },
   });
@@ -79,11 +79,6 @@ const RruDateTimeInput: FC<RruDateTimeInputProps> = (props) => {
     }
   };
 
-  const closePopup = () => {
-    setIsPopupShown(false);
-    field.onBlur();
-  };
-
   const previousMonth = () => {
     if (month === 1) {
       setYear(year - 1);
@@ -107,7 +102,8 @@ const RruDateTimeInput: FC<RruDateTimeInputProps> = (props) => {
       return;
     } else {
       setIntlDate(date);
-      closePopup();
+      setIsPopupShown(false);
+      field.onBlur();
     }
   };
 
@@ -168,7 +164,7 @@ const RruDateTimeInput: FC<RruDateTimeInputProps> = (props) => {
             onIntegerInputChange(matches[6], 0, 59, setMinute);
             onIntegerInputChange(matches[7], 0, 59, setSecond);
           }
-        }else{
+        } else {
           setYear(today.getYear(getCalendarType()));
           setMonth(today.getMonth(getCalendarType()));
         }

src/form/hooks/useField.ts

@@ -19,6 +19,7 @@ import { useFormContext, useFormState, useWatch } from 'react-hook-form';
 import { resolveObjectAttribute } from '../../utils/utils';
 
 /**
+ * @param name field name
  * @param onProgrammaticValue Should check if the provided serialized value does not
  * match the current deserialized value before updating the formContext, otherwise you would end up in an infinite re-render
  */
@@ -29,12 +30,6 @@ export const useField = (name: string, onProgrammaticValue?: (serializedValue: a
   const [isTouched, setIsTouched] = useState<boolean>(false);
   const watchResult = useWatch({ name: name });
 
-  if (name && name.split('.').filter((p) => /\d+/.test(p)).length > 0) {
-    console.error(
-      `Field name "${name}" cannot include a numeric part. Try to prefix the numeric part with some string.`
-    );
-  }
-
   useEffect(() => {
     if (isRegistered.current && onProgrammaticValue) {
       onProgrammaticValue(watchResult);
@@ -47,6 +42,12 @@ export const useField = (name: string, onProgrammaticValue?: (serializedValue: a
       return;
     }
 
+    if (name && name.split('.').filter((p) => /^\d+$/.test(p)).length > 0) {
+      console.error(
+        `Field name "${name}" cannot include a numeric part. Try to prefix the numeric part with some string.`
+      );
+    }
+
     const initialValue = formContext.formState.defaultValues
       ? resolveObjectAttribute(name, formContext.formState.defaultValues)
       : undefined;

stories/Form.RruForm.stories.tsx

@@ -27,8 +27,8 @@ import {
   RruMultiSelectInput,
   RruRadioInput,
   RruSelectInput,
-  RruTextInput,
   RruTextareaInput,
+  RruTextInput,
   useRruForm,
 } from '../src/index';
 import animalsOptions from './data/animalsOptions';
@@ -533,3 +533,27 @@ export const SetValueProgrammaticallyAllTypes = (args) => {
     </RruForm>
   );
 };
+
+export const ValidateFieldNames = (args) => {
+  const rruFormContext = useRruForm();
+
+  const onSubmit = (form) => {
+    action('submitting the form')(form);
+  };
+
+  return (
+    <RruForm
+      context={rruFormContext}
+      onSubmit={onSubmit}>
+
+      <RruTextInput name='email' label='Email' requiredAsterisk />
+      <RruTextInput name='color1' label='Email' requiredAsterisk />
+      <RruTextInput name='animal.1' label='Email' requiredAsterisk />
+
+      <button type='submit' className='btn btn-primary mt-4'>
+        Submit
+      </button>
+
+    </RruForm>
+  );
+};