GitHub Issue 779: Cannot Edit Relative Dates in Sample Finder

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labkey/components",
-  "version": "7.16.0",
+  "version": "7.16.1-fb-relativeDayFilter.1",
   "description": "Components, models, actions, and utility functions for LabKey applications and pages",
   "sideEffects": false,
   "files": [

packages/components/releaseNotes/components.md

@@ -1,6 +1,11 @@
 # @labkey/components
 Components, models, actions, and utility functions for LabKey applications and pages
 
+### version 7.X
+*Released*: X 2026
+- GitHub Issue 779: Cannot Edit Relative Dates in Sample Finder
+    - Allow intermediate editing state for relative date values in DatePickerInput
+
 ### version 7.16.0
 *Released*: 5 February 2026
 - File import warnings for cross type sample import case

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

@@ -166,11 +166,18 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
 
     onChange = (date: Date, event?: any): void => {
         const { onChange, formsy, inlineEdit, queryColumn } = this.props;
+        const { relativeInputValue } = this.state;
 
-        this.setState({ selectedDate: date, invalid: false, invalidStart: false });
+        let validSelect = date;
 
-        if (this.state.relativeInputValue) {
-            onChange?.(this.state.relativeInputValue);
+        if (relativeInputValue) {
+            if (isRelativeDateFilterValue(relativeInputValue, false)) {
+                onChange?.(relativeInputValue);
+            }
+            else {
+                validSelect = undefined;
+                onChange?.(undefined);
+            }
         } else {
             const formatted = getDateTimeDisplayValue(date, queryColumn);
             onChange?.(queryColumn.isTimeColumn ? formatted : date, formatted);
@@ -180,6 +187,8 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
             }
         }
 
+        this.setState({ selectedDate: validSelect, invalid: false, invalidStart: false });
+
         // event is null when selecting time picker
         if (!event && inlineEdit) this.input.current.setFocus();
     };
@@ -191,14 +200,27 @@ 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);
-        } else if (isRelativeDateFilterValue(value)) {
+        } else if (isRelativeDateFilterValue(value, true)) {
             this.setState({ relativeInputValue: value });
             this.props.onChange?.(value);
         } else {
             this.setState({ relativeInputValue: undefined });
         }
     };
 
+    handleCalendarClose = (): void => {
+        const { onCalendarClose, onChange } = this.props;
+        const { relativeInputValue } = this.state;
+        onCalendarClose?.();
+
+        if (relativeInputValue) {
+            if (isRelativeDateFilterValue(relativeInputValue, true) && !isRelativeDateFilterValue(relativeInputValue, false)) {
+                // clear out invalid relative date input on calendar close
+                onChange?.(undefined);
+            }
+        }
+    }
+
     onIconClick = (): void => {
         this.input.current?.setFocus();
     };
@@ -275,7 +297,7 @@ export class DatePickerInputImpl extends DisableableInput<DatePickerInputImplPro
                 isClearable={isClearable}
                 name={name ? name : queryColumn.fieldKey}
                 onBlur={inlineEdit ? onBlur : undefined}
-                onCalendarClose={onCalendarClose}
+                onCalendarClose={this.handleCalendarClose}
                 onChange={this.onChange}
                 onChangeRaw={allowRelativeInput || isTimeOnly ? this.onChangeRaw : undefined}
                 onKeyDown={onKeyDown}

packages/components/src/internal/util/Date.test.ts

@@ -1047,6 +1047,61 @@ describe('Date Utilities', () => {
             expect(isRelativeDateFilterValue('-3d')).toBeTruthy();
             expect(isRelativeDateFilterValue('-0d')).toBeTruthy();
         });
+
+        test('relaxedMatch=true, bad input', () => {
+            expect(isRelativeDateFilterValue('', true)).toBeFalsy();
+            expect(isRelativeDateFilterValue('  ', true)).toBeFalsy();
+            expect(isRelativeDateFilterValue('-D', true)).toBeFalsy();
+            expect(isRelativeDateFilterValue('ad', true)).toBeFalsy();
+            expect(isRelativeDateFilterValue('a1', true)).toBeFalsy();
+            expect(isRelativeDateFilterValue('1dd', true)).toBeFalsy();
+        });
+
+        test('relaxedMatch=true allows incomplete values ending with d', () => {
+            expect(isRelativeDateFilterValue('3d', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('0d', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('300d', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('d', true)).toBeTruthy();
+        });
+
+        test('relaxedMatch=true allows values starting with sign', () => {
+            expect(isRelativeDateFilterValue('+3', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('-3', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('+0', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('-0', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('+300', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('-300', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('+d', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('-d', true)).toBeTruthy();
+        });
+
+        test('relaxedMatch=true allows numbers with optional d', () => {
+            expect(isRelativeDateFilterValue('3', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('0', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('300', true)).toBeTruthy();
+        });
+
+        test('relaxedMatch=true still accepts strict format', () => {
+            expect(isRelativeDateFilterValue('+3d', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('+300d', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('-3d', true)).toBeTruthy();
+            expect(isRelativeDateFilterValue('-0d', true)).toBeTruthy();
+        });
+
+        test('relaxedMatch=true still rejects invalid values', () => {
+            expect(isRelativeDateFilterValue('++3d', true)).toBeFalsy();
+            expect(isRelativeDateFilterValue('2022-04-19', true)).toBeFalsy();
+            expect(isRelativeDateFilterValue('abc', true)).toBeFalsy();
+            expect(isRelativeDateFilterValue('d3', true)).toBeFalsy();
+        });
+
+        test('relaxedMatch=false uses strict validation', () => {
+            expect(isRelativeDateFilterValue('3d', false)).toBeFalsy();
+            expect(isRelativeDateFilterValue('+3', false)).toBeFalsy();
+            expect(isRelativeDateFilterValue('3', false)).toBeFalsy();
+            expect(isRelativeDateFilterValue('+3d', false)).toBeTruthy();
+            expect(isRelativeDateFilterValue('-3d', false)).toBeTruthy();
+        });
     });
 
     describe('getParsedRelativeDateStr', () => {

packages/components/src/internal/util/Date.ts

@@ -796,9 +796,21 @@ export function isDateBetween(date: Date, start: Date, end: Date, dateOnlyCompar
     return time >= start.getTime() && time <= end.getTime();
 }
 
-const RELATIVE_DAYS_REGEX = /^[+-]\d+d$/;
-export function isRelativeDateFilterValue(val: string): boolean {
-    return typeof val === 'string' && RELATIVE_DAYS_REGEX.test(val);
+// Matches strict format: +5d, -10d
+const STRICT_RELATIVE_DAYS = /^[+-]\d+d$/;
+
+// Matches partials: "+", "5", "+5", "5d", "+d", etc.
+const RELAXED_RELATIVE_DAYS = /^[+-]?\d*d?$/;
+
+/**
+ * Returns true if the given string is a valid relative date filter value. Ex: +5d, -1d
+ */
+export function isRelativeDateFilterValue(val: string, relaxedMatch?: boolean): boolean {
+    if (typeof val !== 'string' || val === '') return false;
+
+    if (relaxedMatch) return RELAXED_RELATIVE_DAYS.test(val);
+
+    return STRICT_RELATIVE_DAYS.test(val);
 }
 
 export function getParsedRelativeDateStr(dateVal: string): { days: number; positive: boolean } {