Merge remote-tracking branch 'origin/develop' into fb_amountsAndUnits

# Conflicts:
#	packages/components/package-lock.json
#	packages/components/package.json
#	packages/components/releaseNotes/components.md

Author: labkey-susanh

packages/components/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "6.61.0-amountsAndUnits.3",
+  "version": "6.61.2-amountsAndUnits.3",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/package.json

@@ -16,6 +16,10 @@ Components, models, actions, and utility functions for LabKey applications and p
   - `SampleAmountEditModal` updated so all users go through `updateSampleStorageData`
   - Mark `RawAmount` and `RawUnits` as ignored system fields
 
+### version 6.61.1
+*Released*: 12 September 2025
+- DatePickerInput: don't add milliseconds when entering current time (Issue 53577)
+
 ### version 6.61.0
 *Released*: 8 September 2025
 - QueryModel.getSelectedIds: optimize when filterIds are not passed

packages/components/releaseNotes/components.md

@@ -158,12 +158,8 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
         return getDateFromISO(value, queryColumn, allowRelativeInput, minDate);
     }
 
-    onChange = (date: Date, event?: any, raw?: boolean): void => {
-        const { onChange, formsy, hideTime, inlineEdit, queryColumn } = this.props;
-
-        if (!event && !raw && date?.getMilliseconds() > 0) {
-            date.setMilliseconds(0); // react-datepicker milliseconds are not 0 when selecting time
-        }
+    onChange = (date: Date, event?: any): void => {
+        const { onChange, formsy, inlineEdit, queryColumn } = this.props;
 
         this.setState({ selectedDate: date, invalid: false, invalidStart: false });
 
@@ -188,7 +184,7 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
 
         if (queryColumn.isTimeColumn) {
             // Issue 50010: Time picker enters the wrong time if a time field has a format set
-            this.onChange(parseTime(value), undefined, true);
+            this.onChange(parseTime(value), undefined);
         } else if (isRelativeDateFilterValue(value)) {
             this.setState({ relativeInputValue: value });
             this.props.onChange?.(value);
@@ -197,11 +193,6 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
         }
     };
 
-    getDateFormat(): string {
-        const { queryColumn, hideTime } = this.props;
-        return getPickerDateAndTimeFormat(queryColumn, hideTime).dateFormat;
-    }
-
     onIconClick = (): void => {
         this.input.current?.setFocus();
     };
@@ -211,6 +202,26 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
         this.input.current?.setFocus();
     };
 
+    /**
+     * This method returns the current value OR the current date with seconds and milliseconds set to zero. It is
+     * important to set milliseconds to zero because there is a bug in react-datepicker that causes it to set the
+     * milliseconds to the current milliseconds when the user first selects a value, even if the UI shows 0
+     * milliseconds. If there is a pre-existing value, or openToDate has zero ms, then the selections will always be
+     * correct.
+     *
+     * See Issue 53577
+     */
+    getOpenToDate = (): Date => {
+        const { selectedDate } = this.state;
+
+        if (selectedDate) return selectedDate;
+
+        const now = new Date();
+        now.setSeconds(0);
+        now.setMilliseconds(0);
+        return now;
+    };
+
     render(): ReactNode {
         const {
             addLabelAsterisk,
@@ -243,7 +254,6 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
         const isTimeOnly = queryColumn.isTimeColumn;
         const picker = (
             <DatePicker
-                ref={this.input}
                 autoComplete="off"
                 autoFocus={autoFocus}
                 className={inputClassName}
@@ -252,22 +262,24 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
                 id={queryColumn.fieldKey}
                 isClearable={isClearable}
                 name={name ? name : queryColumn.fieldKey}
+                onBlur={inlineEdit ? onBlur : undefined}
                 onCalendarClose={onCalendarClose}
                 onChange={this.onChange}
                 onChangeRaw={allowRelativeInput || isTimeOnly ? this.onChangeRaw : undefined}
                 onKeyDown={onKeyDown}
                 onMonthChange={this.onChange}
+                onSelect={inlineEdit ? this.onSelect : undefined}
+                openToDate={this.getOpenToDate()}
                 placeholderText={placeholderText ?? `Select ${queryColumn.caption.toLowerCase()}`}
+                ref={this.input}
                 selected={invalid ? null : selectedDate}
+                shouldCloseOnSelect={inlineEdit ? false : undefined}
                 showTimeSelect={!hideTime && (isDateTimeCol(queryColumn) || isTimeOnly) && !validValueInvalidStart}
                 showTimeSelectOnly={!hideTime && isTimeOnly}
-                timeIntervals={isTimeOnly ? 10 : 30}
                 timeFormat={timeFormat}
+                timeIntervals={isTimeOnly ? 10 : 30}
                 value={allowRelativeInput && !isTimeOnly && isRelativeDateFilterValue(value) ? value : undefined}
                 wrapperClassName={inputWrapperClassName}
-                onSelect={inlineEdit ? this.onSelect : undefined}
-                onBlur={inlineEdit ? onBlur : undefined}
-                shouldCloseOnSelect={inlineEdit ? false : undefined}
             />
         );
 
@@ -293,6 +305,8 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
                     </label>
                 ) : (
                     <FieldLabel
+                        column={queryColumn}
+                        isDisabled={isDisabled}
                         label={label}
                         labelOverlayProps={{
                             isFormsy: false,
@@ -303,8 +317,6 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
                         }}
                         showLabel={showLabel}
                         showToggle={allowDisable}
-                        column={queryColumn}
-                        isDisabled={isDisabled}
                         toggleProps={{
                             onClick: this.toggleDisabled,
                         }}

packages/components/src/internal/components/forms/input/DatePickerInput.tsx

@@ -131,10 +131,11 @@ export function getPickerTimeFormatWithPrecision(
     return timeFormat;
 }
 
-// convert rawDateTimeFormat to adjust precision
-// for example:
-// 'yyyy-MM-dd HH:mm' -> 'yyyy-MM-dd HH:mm:ss' if showSeconds is true and showMilliSeconds is false
-// 'yyyy-MM-dd hh:mm a' -> 'yyyy-MM-dd hh:mm:ss.SSS a' if showSeconds is true and showMilliSeconds is true
+/**
+ * This method is takes a date format, and adds additional precision to it as necessary:
+ *  'yyyy-MM-dd HH:mm' -> 'yyyy-MM-dd HH:mm:ss' if showSeconds is true and showMilliSeconds is false
+ *  'yyyy-MM-dd hh:mm a' -> 'yyyy-MM-dd hh:mm:ss.SSS a' if showSeconds is true and showMilliSeconds is true
+ */
 export function getPickerFormatWithPrecision(
     rawDateTimeFormat: string,
     showMinute?: boolean,
@@ -151,6 +152,21 @@ export function getPickerFormatWithPrecision(
     ).trim();
 }
 
+/**
+ * Given a QueryColumn and an initDate value this method will return a date and time format. By default, we will return
+ * the date/time format from the QueryColumn, however, in some cases we may return a date/time format that has higher
+ * precision (see getPickerFormatWithPrecision above).
+ *
+ * Changing the precision of a date or time format is necessary for a few reasons:
+ *  - LabKey uses date formats for display reasons only, we actually always store fully precise dates and times
+ *  - We want to allow users to enter very precise dates and times if needed, and if they do enter a very precise date
+ *  then we want to render what they entered, so they do not falsely believe that we are truncating their data
+ *  - If the user enters a date/time that matches the existing format, we want to display it in that format, in order
+ *  to reduce visual clutter (react-datepicker looks worse when using highly precise date formats)
+ *  - react-datepicker uses date formats as display and value formats, if you pass a strict date format it will only
+ *  give you values that match the format, it will truncate more precise values entered by users, which is a data
+ *  integrity problem (See Issue 52820).
+ */
 export function getPickerDateAndTimeFormat(
     column: QueryColumn,
     hideTime?: boolean,