Selecting a date/time causes keyboard to open on mobile

Selecting a date/time causes keyboard to open on mobile

Posted by: ken on 19 June 2018, 11:28 am EST

• 

  ken

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 19 June 2018, 11:28 am EST

  I’m using the wj-input-date and wj-input-date-time controls in an Angular app like this:

  <wj-input-date-time [(value)]="myDate" [isRequired]="false" [inputType]="text"></wj-input-date-time>
  

  Whenever the user selects a date or time from the dropdown buttons, it sends focus back to the text box. This is fine on desktop, but on mobile it causes the keyboard to open, which forces the user to scroll down before they can access the next field. Is there any way to stop it from doing that?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 19 June 2018, 5:05 pm EST

  Hi,
  
  To remove the focus from underlying input element you may use blur() method provided by HTMLElement.
  
  Please refer to following code snippet for the same:

  / * HTML */
  <wj-input-date-time #dt (initialized)="init(dt)" [(value)]="myDate" [isRequired]="false" [inputType]="'text'"></wj-input-date-time>
  
  /* in equivalent component.ts */
  init(wjDateTime){
  	wjDateTime.isDroppedDownChanged.addHandler(()=>{
  		wjDateTime.inputElement.blur();
  	});
  	wjDateTime.inputTime.isDroppedDownChanged.addHandler((s,e)=>{
  		wjDateTime.inputElement.blur();
  	});
  }
  

  You may also refer to the following sample:-
  
  https://stackblitz.com/edit/angular-hw4cim?file=app%2Fapp.component.ts

  ~Manish

• 

  ken

  • Post Options:
  • Link
    Copy

  Posted 20 June 2018, 7:56 am EST

  That worked perfectly, thank you!

• 

  ken

  • Post Options:
  • Link
    Copy

  Posted 26 June 2018, 11:19 am EST

  After additional testing, I ran into an issue with this after all.

  Is there any way this can be done without losing focus on the element on desktop? Adding focus() to the event handler just causes the keyboard to open again on mobile.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 June 2018, 11:06 pm EST

  Hi,
  
  In such a such, you may first check if the device is touch device or not before calling the blur() method.

  Refer to following stackoverflow answer which discusses various methods to detech a touch device:- https://stackoverflow.com/a/4819886/359287

  Please refer to following code snippet

  init(wjDateTime){ 
  	function isTouchDevice(){ 
  		return 'ontouchstart' in window || 'msMaxTouchPoints' in window.navigator; 
  	} 
  	var isTouch=isTouchDevice(); 
  	wjDateTime.isDroppedDownChanged.addHandler(()=>{ 
  	if(isTouch){ 
  		wjDateTime.inputElement.blur(); 
  	} 
  }); 
   
  wjDateTime.inputTime.isDroppedDownChanged.addHandler((s,e)=>{
  	if(isTouch){ 
  		wjDateTime.inputElement.blur(); 
  	} 
  }); 
  }
  

  Here is the updated sample for the same:- https://stackblitz.com/edit/angular-7evrtt?file=app/app.component.ts

  ~Manish

• 

  ken

  • Post Options:
  • Link
    Copy

  Posted 19 September 2018, 9:03 am EST

  It looks like this has been fixed entirely in version 5.20182.523, it’s working without the workarounds now.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 19 September 2018, 2:31 pm EST

  Hi Ken,
  
  Thanks for notifying us. We have some change for mobile devices which should fix this issue.

  Again thanks for notifying…

  ~Manish