ngx-braintree
ngx-braintree copied to clipboard
Keyboard doesn't dismiss when using Ionic or mobile devices
I found that the keyboard wouldn't successfully get dismissed after entering credit card information. I'm using this within an Ionic app. I had to use the following code to get it to dismiss correctly.
var field = document.createElement('input');
field.setAttribute('type', 'text');
document.body.appendChild(field);
setTimeout(function() {
field.focus();
setTimeout(function() {
field.setAttribute('style', 'display:none;');
}, 50);
}, 50);
However this requires the keyboard to be shown already for it to work. Since I don't know when the keyboard is visible this shows the keyboard and then hides it. Not sure if there is a way to tell when the keyboard is visible or not.
As of right now this is the only solution that I can find to get the keyboard to dismiss when using Ionic.
hideKeyboard() {
//this set timeout needed for case when hideKeyborad
//is called inside of 'onfocus' event handler
setTimeout(function() {
//creating temp field
var field = document.createElement('input');
field.setAttribute('type', 'text');
//hiding temp field from peoples eyes
//-webkit-user-modify is nessesary for Android 4.x
field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
document.body.appendChild(field);
//adding onfocus event handler for out temp field
field.onfocus = function(){
//this timeout of 200ms is nessasary for Android 2.3.x
setTimeout(function() {
field.setAttribute('style', 'display:none;');
setTimeout(function() {
document.body.removeChild(field);
document.body.focus();
}, 10);
}, 10);
};
//focusing it
field.focus();
}, 10);
}
Note the Ionic BrainTree Module doesn't work correctly. I couldn't even get it to build for individuals that are thinking of going down that path I would be weary.
Hi there, it also happens in angular v6+