Skip to content

Commit b8bc822

Browse files
authored
fix(ui5-datetime-picker): prevent first keystroke from resetting caret position (#13369)
## Overview When typing into the `ui5-datetime-picker` input, the first keystroke is silently discarded and the caret jumps to the end. Subsequent keystrokes work normally. ## What We Did - Removed `@property()` decorator from private property in `DateTimePicker`, making it a plain class field ## What This Fixes - **Input behavior** — first keystroke in DateTimePicker now works correctly instead of being swallowed - **Spurious re-render** — The private property, storing the last value no longer triggers a re-render on its first assignment, which was overwriting the live value and resetting the native input
1 parent 56f8f24 commit b8bc822

2 files changed

Lines changed: 45 additions & 2 deletions

File tree

packages/main/cypress/specs/DateTimePicker.cy.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -590,6 +590,50 @@ describe("DateTimePicker general interaction", () => {
590590
//The change event should not have been fired a second time.
591591
cy.get("@changeStub").should("have.been.calledOnce");
592592
});
593+
594+
it("first keystroke in input should not reset caret position", () => {
595+
cy.mount(
596+
<DateTimePicker
597+
value="Jan 11, 2020, 11:11:11 AM"
598+
displayFormat="long"
599+
minDate="Jan 11, 2020, 00:00:00 AM"
600+
maxDate="Jan 31, 2020, 11:59:59 PM"
601+
/>
602+
);
603+
604+
cy.get("[ui5-datetime-picker]").as("dtp");
605+
606+
cy.get("@dtp")
607+
.shadow()
608+
.find("[ui5-datetime-input]")
609+
.shadow()
610+
.find("input")
611+
.as("nativeInput");
612+
613+
// Click to focus the input, then move to start
614+
cy.get("@nativeInput").realClick();
615+
cy.realPress("Home");
616+
617+
// Verify caret is at position 0
618+
cy.get("@nativeInput").should($input => {
619+
expect(($input[0] as HTMLInputElement).selectionStart).to.equal(0);
620+
});
621+
622+
cy.get("@nativeInput").then($input => {
623+
const originalValue = ($input[0] as HTMLInputElement).value;
624+
625+
// Press Delete — should remove first character
626+
cy.realPress("Delete");
627+
628+
cy.get("@nativeInput").should($input => {
629+
const input = $input[0] as HTMLInputElement;
630+
// The value should be different (first char removed)
631+
expect(input.value, "first keystroke should modify the value").to.not.equal(originalValue);
632+
// Caret should remain at position 0 after deletion
633+
expect(input.selectionStart, "caret should remain at start").to.equal(0);
634+
});
635+
});
636+
});
593637
});
594638

595639
describe("Accessibility", () => {

packages/main/src/DateTimePicker.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,7 @@ class DateTimePicker extends DatePicker implements IFormInputElement {
158158
* Stores the last valid value to preserve time when entering invalid values
159159
* @private
160160
*/
161-
@property()
162-
_lastValidValue: string = "";
161+
_lastValidValue = "";
163162

164163
@query("[ui5-time-selection-clocks]")
165164
_clocks!: TimeSelectionClocks;

0 commit comments

Comments
 (0)