Focus event on DatePicker wont return original event in FocusEventArgs

Question

Hello,Focus event on DatePicker won't return original event in FocusEventArgs.https://stackblitz.com/edit/angular-s7i7hi-atwy97edit:query-2: When popup is opened it is impossible to navigate inside of the input field. The cursor is stuck on the same selection.Regards.Marko

Berly Christopher · Answer

Hi Marko,  
 
Greetings from Syncfusion support.   
 
Query 1:  
 
Focus event on DatePicker won't return original event in FocusEventArgs.  
 
Response:  
 
We would like to inform you that, we have passed component model only as the focus event arguments in our source. Can you please explain the use case scenario to use original event arguments for DatePicker that will help us to check and proceed further at our end.   
 
Query 2:   
 
When popup is opened it is impossible to navigate inside of the input field. The cursor is stuck on the same selection.   
Response:   
  
Response:  
 
In our DatePicker control the when the popup consisting of the calendar compoenent is opened, the focus gets moved to calendar component. This enabled the navigation of the date cells using the keyboard. The input value can be edited by entering directly but navigation occurs only in the calendar component. This is the intended behavior for the Datepicker component.   
 
Regards,  
Berly B.C

Marko Bezjak · Answer

Hello,Query 1: I want to open datePicker popup only if event was focused with key "TAB" because this means that the user is using keyboard and can also select date in the popup with keyboard. If the user is using mouse the I don't want to open popup because he can easily click the calendar icon and open popup manually. That's why it would be nice to have original event.Query 2: So now when I automatically open date-picker's popup on focus... there is no way that user can change the date by entering a value in input field. because the focus will always open the popup preventing us to edit the inputs string value.Regards.Marko

Berly Christopher · Answer

Hi Marko, 
  
Thanks for providing information. 
  
Query 1: 
  
You can get the event arguments from the native “keyup” event arguments and show the DatePicker popup based on the condition as mentioned below. 
  
[app.component.ts] 




@ViewChild("datepick") 
public dateObj: DatePickerComponent; 
ngAfterViewInit() { 
    (this as any).dateObj.inputElement.addEventListener("keyup", function (e) {     
      if(e.key === "Tab"){ 
        this.show(); 
      } 
    }.bind(this.dateObj), false); 
  } 

  
Please find the sample from the below link. 
Sample Link: https://stackblitz.com/edit/angular-s7i7hi-yduwd3?file=app.component.html 
  
Query 2: 
We can type the date value in the input element of the DatePicker component while open the popup on the component focus. We have demonstrated this by taking video and attached it below. 
  
Video Link: https://www.syncfusion.com/downloads/support/forum/151519/ze/151519104325586  
  
Regards, 
Berly B.C