fix: prevent datetime from validating early

Closes #1099
bpmn-io · Apr 5, 2024 · 7c939d3 · 7c939d3
1 parent 032d9a8
commit 7c939d3
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 7 deletions.
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Datetime.js b/packages/form-js-viewer/src/render/components/form-fields/Datetime.js
@@ -15,7 +15,7 @@ import { Timepicker } from './parts/Timepicker';
 
 import { formFieldClasses, prefixId } from '../Util';
 import { sanitizeDateTimePickerValue } from '../util/sanitizerUtil';
-import { parseIsoTime, serializeDate, serializeDateTime, serializeTime } from '../util/dateTimeUtil';
+import { parseIsoTime, serializeDate, serializeDateTime, serializeTime, getNullDateTime, isValidDate, isValidTime } from '../util/dateTimeUtil';
 
 const type = 'datetime';
 
@@ -49,14 +49,9 @@ export function Datetime(props) {
   const { formId } = useContext(FormContext);
   const dateTimeGroupRef = useRef();
 
-  const getNullDateTime = () => ({ date: new Date(Date.parse(null)), time: null });
-
   const [ dateTime, setDateTime ] = useState(getNullDateTime());
   const [ dateTimeUpdateRequest, setDateTimeUpdateRequest ] = useState(null);
 
-  const isValidDate = (date) => date && !isNaN(date.getTime());
-  const isValidTime = (time) => !isNaN(parseInt(time));
-
   const useDatePicker = useMemo(() => subtype === DATETIME_SUBTYPES.DATE || subtype === DATETIME_SUBTYPES.DATETIME, [ subtype ]);
   const useTimePicker = useMemo(() => subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME, [ subtype ]);
 
@@ -113,9 +108,13 @@ export function Datetime(props) {
       newDateTimeValue = serializeDateTime(date, time, timeSerializingFormat);
     }
 
+    if (value === newDateTimeValue) {
+      return;
+    }
+
     onChange({ value: newDateTimeValue, field });
 
-  }, [ field, onChange, subtype, timeSerializingFormat ]);
+  }, [ value, field, onChange, subtype, timeSerializingFormat ]);
 
   useEffect(() => {
     if (dateTimeUpdateRequest) {

diff --git a/packages/form-js-viewer/src/render/components/util/dateTimeUtil.js b/packages/form-js-viewer/src/render/components/util/dateTimeUtil.js
@@ -212,6 +212,21 @@ export function isInvalidDateString(value) {
   return isNaN(new Date(Date.parse(value)).getTime());
 }
 
+export function getNullDateTime() {
+  return {
+    date: new Date(Date.parse(null)),
+    time: null
+  };
+}
+
+export function isValidDate(date) {
+  return date && !isNaN(date.getTime());
+}
+
+export function isValidTime(time) {
+  return !isNaN(parseInt(time));
+}
+
 function _getSignedPaddedHours(minutes) {
   if (minutes > 0) {
     return '-' + _getZeroPaddedString(Math.floor(minutes / 60));