lightning-input type="datetime" does not hold the time value at first time in the UI

Question

When I select the time first in the date time field it does not hold the value and when I do the same again and select the time first it holds it. Below is my code :

JS :

@api endDateTime = null;
handleEndChange (event) {
    this.endDateTime = event.detail.value;       
} 
           

html :

<lightning-input class="" type="datetime" name="End" label="End" value={endDateTime} onchange={handleEndChange} message-when-value-missing=" " message-when-bad-input=" " required></lightning-input>

Answer 1

Once a variabile has been declared without initializing it (i.e. @api endDateTime;), it's undefined.

When you set only the time part, the handler runs, but event.detail.value holds null (it's a datetime field, just the time part is not enough to have a valid value), therefore endDateTime is overwritten.
Please note that null and undefined are different values with different meanings (null !== undefined) and a variable used in the template is reactive, therefore the framework reacts to that change refreshing the lightning-input component passing null as value, which remove your value.
That's why the first time it seems that the component does't hold the value.

After that, if you set again just the time, endDateTime keeps null as value, so it doesn't change and the framework doesn't refresh the lightning-input, therefore, starting from the second time, the component works, it hold the time value.

To fix it, just initialize the variable to null:

@api endDateTime = null;

Please note that you should use @api decorator only if want to make endDateTime public, i.e. if you want to set it via lightning builder or from a parent component.