[DateTimePicker]: Unexpected value reset in DateTimePicker when manually editing value

[kristinayotova]

Bug Description

I am experiencing unexpected behavior with the DateTimePicker component from @ui5/webcomponents-react.

I have a Select component that sets predefined values for the DateTimePicker, and a DateTimePicker that depends on the selected option. After programmatically setting the value of the DateTimePicker using predefines values from Select, attempting to type or delete in the input field does not accept my changes and instead formats the string using valueFormat rather than displayFormat.

I am not fully sure whether this is a bug or a mistake on my side, so I would appreciate your help.

Affected Component

DateTimePicker

Expected Behaviour

No response

Isolated Example

https://stackblitz.com/edit/ui5wcr-at-qb9cyuap?file=src%2FApp.jsx

Steps to Reproduce

1. Open stack blitz example
2. Select one of the predefined options (e.g. “7 days”) from the Select.
3. Observe that the DateTimePicker value is updated with a calculated ISO string.
4. Change the selection to “Specific date”, which enables manual editing of the DateTimePicker.
5. Click into the DateTimePicker input field.
6. Try to: delete part of the existing value, or type a new value

Result
The input does not accept the manual changes as expected and the newly entered value is reverted and re-formatted using valueFormat.

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.18.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[tsanislavgatev]

Hi colleagues,

Can you have a look at this?

Best Regards,
Tsanislav