inputProps focus and blur handlers being called inappropriately for RangeDatepicker

[VishalLudhrani]

Ideally, when user focuses on an input, focus handler should run.
And when user moves away from that input, blur handler should run.

RangeDatepicker component isn't handling these events properly.
Both the handlers are being run, for each event, and this is contradictory to the default way of handling HTML events.

Link to reproduced code.
Please check console when triggering focus and blur events.

[aboveyunhai]

@VishalLudhrani it was simply because <input /> should never be a trigger element. <button /> is the right one.
<input /> should go with a absolute position <button /> wrapped by a trigger on top of it.
So button in charge of opening the <panel /> and input serves it's own purpose.
This was a mistake from the initial "design". 😅 (you can blame the naïve me from years ago). My original intention was expecting ppl just copy paste the entire /src folder into their own project.
But somehow it's getting popular. I just plan to make a breaking change to correct the structure and move it into 1.0 version I guess, in case if ppl don't like the correct structure should be so they can stick to the current version.

Even without my fix, you can always use the Calendar implementation from the example to create your own popover wrapper.

[VishalLudhrani]

Thank you for the explanation.
That makes sense.
I can now think of different approaches to this problem.

And yeah, this project is picking up really well.
There are very few date pickers supporting Chakra UI as a design framework.
Also, Chakra UI has a basic Input implementation.
Unless they update their components library, such small projects are life savers! :)