Input losing focus when I used arrows in datepicker

[martinadamec]

@datepicker-react/hooks@2.4.0

Describe the bug When I have an input in the same page with a datepicker, I use arrows for navigate in the datepicker, after that ...I hit a key in the input, input lose focus and datepicker has focus back (at last focused day).

I created a repo with this bug. It is happen with CRA (create react app). I used base example plus default html input.

Source code (including props configuration) https://github.com/martinadamec/datepicker-hooks-lose-input-focus-bug

Screen record https://github.com/martinadamec/datepicker-hooks-lose-input-focus-bug/blob/master/screen-record.mov

Desktop (please complete the following information):

• OS: Mac
• Browser: Chrome (83), Firefox (77)

---

Any idea what is wrong? Thank you Martin.

[tresko]

Hi, I don't know. I will need to examine it.

[m7kvqbe1]

We are also experiencing this same issue - has this recently been introduced?

[m7kvqbe1]

This appears to be related to the dayRef used to initialise the useDay hook.

By removing the ref from our rendered JSX element we were able to resolve this issue.

[martinadamec]

This appears to be related to the dayRef used to initialise the useDay hook.

By removing the ref from our rendered JSX element we were able to resolve this issue.

nice :), would you do a PR? or at least fork the repo with these changes?

[m7kvqbe1]

@marekstracar - See PR that references this issue above.

I believe consequences are a loss of keyboard control until we find a fix upstream.

[m7kvqbe1]

https://github.com/tresko/react-datepicker/blob/ba5d98884279e206b381bf768e226f812ee8e951/packages/hooks/src/useDay/useDay.ts#L36

I think the issue relates to this line.

[tresko]

Thank you. I will do a PR in the afternoon.

[tresko]

Should be fixed in version 2.4.1.