enhancement
major
minor
defect
critical
major
minor
minor
#30197
React Table: Date cell in in-place edit accepts any partial keyboard input (e.g., year 0002)
Problem
In tables with in-place editing of date cells (columns of type tl.core:Date, built-in date editor ReactDatePickerControl, native <input type="date">), the value is updated with every browser change event and saved immediately. The browser triggers a `change` event as soon as all segments form a valid date. When typing the year, this results in intermediate values such as 0002.
Observed:
- In-place cell in a tree table: If you type “01032027” into an empty cell, 01.03.0002 is saved. The rest of the input is lost.
- Clearing a segment (Backspace): A zero is occasionally inserted.
- Form or row-edit table with a “Save” command: Correct. The complete value remains in the field; it is not saved until “Save” is clicked.
The issue therefore concerns in-place editing in tables that saves immediately.
Version: 8.0.0-alpha12, tl-layout-react.
Reproduction
- Table with an editable date column in in-place mode (value is written immediately upon change).
- Type “01032027” into an empty cell using the keyboard.
- Expected: 01.03.2027 is saved when exiting the cell or pressing Enter.
- Actual: 01.03.0002 is saved, after which the input is aborted.
Expected
- When entering data via the keyboard, the value of a date cell is not applied until the cell is exited (blur) or the Enter key is pressed, analogous to `setSendValueOnBlur(true) ` for number and text fields.
- Selections made in the date dialog or via paste are applied immediately.
- An empty intermediate value when editing a segment is not accepted.
Impact
Bulk maintenance of dates directly in tables (in Prime, for example, phase dates per item) saves incorrect data. Until a solution is found, the only options are entering dates via the date dialog, pasting a complete date, or using a form with the “Save” button.
Solution
Date fields in the React UI (date, time, date with time) behave like number and text fields when typing, both in tables and in forms:
- Keyboard input is held and is not accepted until you exit the field or press Enter. Partial entries, such as the year 0002 or an empty segment, do not reach the server.
- Selections made in the date dialog and pasted values are accepted immediately.
- Incomplete entries (e.g., year still blank) are discarded when you exit the field or press Enter; the field displays the last saved value again. Therefore, a partially typed entry never overwrites a saved value.
Technical:
- DatePickerState extends TypingFieldState (sendValueOnBlur, debounceMs, commitEdits).
- ReactDatePickerControl sets ` sendValueOnBlur ` for all date fields and reports completed edits (`commitsEdits()`), just like ReactNumberInputControl.
- TLDatePicker uses ` useTLTypingField`; a change made without first pressing an edit key (date dialog, insert) is sent immediately.
- The MUI adapter, MuiDatePickerAdapter, follows the same rules: typing (onChange) is held back, and the selection in the picker (onAccept) is sent immediately.
- The React demo includes a table with a date column that can be edited in place.