Improve the experience of clearing date time picker field value

Issue Summary

Currently, the only way to clear the value of date time picker fields is by clicking on the field value, clicking on the "X" that appears on the right-hand side, then clicking on the field area again and clicking outside the field area.

Here's a short video showing how it works: https://www.loom.com/share/5191b049fd4e45ecab68c2ba96301775?sid=482b7409-4c6c-4327-bea6-64500e3a8aed 

Steps to Reproduce

1. Enter a field value in Date and Time picker field.
2. Click Enter for the value to be saved.
3. Click on the field again > click on the X to clear the entire field.
4. Click enter or elsewhere on the issue.
5. The field gets stuck on prompt values.
   
   6. Refreshing the page returns the old value we put in p.1

Expected Results

Clicking the X should clear the field immediately after clicking enter or elsewhere on the issue. The same way it is behaving for a Date fields.

Actual Results

Refreshing the page returns the old Date and Time value. The 'X' button does not reflect immediately with 1 click.

Workaround

To clear the field click on the 'X', then again on the field and then outside. This additional click inside the field clears it out once we go out of the field.

Currently, the only way to clear the value of date time picker fields is by clicking on the field value, clicking on the "X" that appears on the right-hand side, then clicking on the field area again and clicking outside de field area.

Here's a short video showing how it works: https://share.getcloudapp.com/eDuRg0Ed

Problem

If you don't click inside the field area after clicking on the "X", the change will not be saved.

Suggestion

Improve this experience in a way that clicking on the "X" clears the value and saves the change.