Hide Keyboard on mobile using datepicker

Hi All,

I have a datepicker (default OutSystems one) in a mobile web app using reactive web application. If I open my application on mobile and want to enter a date the keyboard of the iPhone opens pushing the datepicker (calender thing) up and out of screen. It is hard to get it back and not user friendly. I have tried some JavaScript on the onFocus action of the input field but nothing hides the keyboard. My JS knowledge is not optimal so if anyone knows how to do this, please share with me ;) 


The input field that the datepicker works on is input type date.

Thanks!

mvp_badge
MVP

Hi Max,

I tested this on android and don't have that behavior, no keyboard is opened. So it seems to be an iOS specific problem. There is another post that reports the same problem, but it there it says its ios14 related

https://www.outsystems.com/forums/discussion/65129/ios-14-issue-with-input-date-type/

Regards,

Daniel

Hi Daniel,

Thanks for the reply. The link you are refering to is about a mobile application, right? I am using a reactive web application and open in through my browser on phone. Will updating the MABS still have any effect in this case? 

 

mvp_badge
MVP

indeed, the link is for mobile, but just to point out there seem to be ios14 specific issues. I myself tested it with reactive. Please remember also a mobile app is reactive with the same underlying code as reactive just running in a webview from cordova.


mvp_badge
MVP

Hi Max,


Don't know if you have already found a solution for your problem, but I ran into the same issue and I was able to solve it with simple Javascript. On the OnReady screen event, you just have to set the onReady property of the input element to True.


OML with an example follows in attachment.


Kind Regards,
João

ReactiveSandboxDatePickerMobileKeyboard.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.