ngx-braintree icon indicating copy to clipboard operation
ngx-braintree copied to clipboard

Keyboard doesn't dismiss when using Ionic or mobile devices

Open selected-pixel-jameson opened this issue 7 years ago • 3 comments

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.

selected-pixel-jameson avatar Jul 20 '18 16:07 selected-pixel-jameson

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);
  }

selected-pixel-jameson avatar Jul 20 '18 17:07 selected-pixel-jameson

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.

selected-pixel-jameson avatar Jul 20 '18 17:07 selected-pixel-jameson

Hi there, it also happens in angular v6+

amhhernandez avatar Oct 31 '18 04:10 amhhernandez