Breaks when inside a label tag

[aleksre]

When the component is placed inside a <label> tag, it will close and immediately re-open itself when the user selects a date.

There are several good reasons for wrapping a <input> within a <label>. It means you don't have to give the input an id (and a for attribute for the label), but still allows you to get the accessibility benefit of having a label semantically tied to the input. It also allows the user to click on the label itself to shift focus to the input.

Another issue I noticed, is that the input component is not "transparent". In other words, it does not forward native events from the input out to the consumer of the date-pick component. This means that the component will not work with validation frameworks that rely on blur for example.

I have made a codesandbox to illustrate both issues here.