Kendo-angular: DatePicker not dismissing unless you force focus on it

[Jahrenski]

I'm submitting a...

• Bug report

Current behavior

Unable to close the date picker's popup by clicking anywhere else unless I force focus the element.

Expected behavior

I expect the date picker's popup to close without having to force the focus on the element.

Minimal reproduction of the problem with instructions

https://plnkr.co/edit/NqoGn3AN4ntvVUlO6nF8

You need to have the device toolbar activated in the devtools (chrome). Or use a real device
Start Date picker forces the focus onto itself and clicking anywhere else will trigger the blur event that seems to close the popup.

End Date picker does not force the focus and will not close on blur

Environment

Package versions:

+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @compodoc/[email protected]
+-- @ionic-native/[email protected]
+-- @ionic-native/[email protected]
+-- @ionic-native/[email protected]
+-- @ionic-native/[email protected]
+-- @ionic-native/[email protected]
+-- @ionic-native/[email protected]
+-- @ionic-native/[email protected]
+-- @ionic-native/[email protected]
+-- @ionic-native/[email protected]
+-- @ionic/[email protected]
+-- @ionic/[email protected]
+-- @ngx-translate/[email protected]
+-- @ngx-translate/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- UNMET PEER DEPENDENCY [email protected]
`-- [email protected]

Browser:

• Chrome (desktop) Version 68.0.3415.0 (Official Build) canary (64-bit)

System:

• TypeScript version: 2.8.1
• Node version: v8.1.4 - npm: 5.6.0
• Platform: Windows

[ggkrustev]

Hi @Jahrenski,
it seems that the plunkr works now. Could you provide a runnable demo or a repro steps that could help us to observe the problem locally? Thanks in advance.

[Jahrenski]

Updated the main post with the link to the plnkr repro.

[ggkrustev]

Hi @Jahrenski,

Thanks for the repro demo. Indeed, the popup won't close on document click when loaded in mobile device.

In general, the component closes the popup on blur, but hence neither the input or the calendar is focused on open, the popup is left opened. The described behavior is actually intended, because we don't want to show virtual keyboard (on input focus) when popup is toggled.

I do agree that leaving the popup opened is not lead to great U. We will research the case more and will update the thread once we have more information.

[ggkrustev]

A fix is released in v3.4.0-dev.201805210833. The easiest to try the change is to install the DEV release:
npm i @progress/kendo-angular-dateinputs@dev

[ggkrustev]

Fixed in v3.4.0. Please install the latest package to see the changes.

npm i @progress/[email protected]