Using calendar with input and calling .update() method before opening calendar picker reassigns overrides the input

[ghiscoding]

It looks like if we set selected dates and then call .update({ ... }) before the calendar picker had time to be created (before opening the picker), it will override (reassign) the input to be the calendar picker element. This is unexpected, it not breaks the styling but also cause leakage because instead of having a single picker element, after opening the picker via the input, it now has 2 inputs instead of 1 causing the leaking.

Here's the updated code sandbox with the code to test with
https://codesandbox.io/s/cold-hill-94mq9f?file=/calendar.ts

If we call .update() , we can see below that the input is reassigned to be the calendar picker element

but if we first click on the input and open the calendar picker, then the input remains untouched and works as intended

You can reproduce via the codesandbox above and/or use this piece of to execute .update() on a button click before opening the calendar picker

document.querySelector("#select-date").addEventListener("click", () => {
  calendarInput.settings.selected = {
    dates: ["2023-04-07"],
    month: 3,
    year: 2023
  };
  calendarInput.update({
    dates: true,
    month: true,
    year: true,
    time: true
  });
  calendarInput.HTMLInputElement!.value = "2023-04-07";
});

The only way I can think of fixing this issue is somehow do an explicit init of the picker (creating the picker before calling the update but keep it hidden) so that when we call the update, it finds the correct picker.