Show/retain keyboard when password toggler is clicked

Question

I have the following code, which results in a single password input being rendered with the toggler overlaying the visible input. The ion-toggle directive toggles visibility of the two inputs.

<label class="item item-input">
    <input placeholder="Password" ng-hide="showPassword" type="password">
    <input placeholder="Password" ng-if="showPassword" type="text">

    <ion-toggle ng-model="showPassword" toggle-class="toggle-energized">&nbsp;</ion-toggle>
</label>

When the toggler has focus, the software keyboard retracts. The user has to then tap back into the input to show the keyboard again.

How can I programmatically show/retain the keyboard when the toggler has focus? I've tried writing a directive to force focus back onto the inputs, but that feels clunky, and there's the issue of there being two inputs.

Here's a basic demo. You won't get a keyboard in a desktop browser, of course.

Thank you.

Answer 1

I created a directive which will give focus on password field when toogle button is clicked. Also refactored html of password field instead of two field it will only show one field.

Markup

<ion-content>
  <label class="item item-input" ng-init="pwd">
    <input placeholder="Password" ng-attr-type="{{showPassword? 'text': 'password'}}" 
      ng-model="pwd" do-focus="showPassword"/>

    <ion-toggle ng-model="showPassword" toggle-class="toggle-energized">&nbsp;</ion-toggle>
   </label>
</ion-content>

Directive

.directive('doFocus', function(){
  return{
    link: function(scope, element, attrs){
      scope.$watch(attrs.doFocus,function(newValue, oldValue){
          element.focus();
      });
    }
  }
});

Forked Codepen

Edit

Directive has implemented in such a way that we are passing to toggling flag name to the showPassword inside directive attribute like do-focus="showPassword" so that directive will put $watch on the scope variable by using attrs.doFocus, watcher function gets fired and when you toggle the showPassword button. Basically this inner watcher is scope.$watch('showPassword'. Then the function first parameter would be newValue which is changed value & oldValue means the previous value of showPassword model. Here in your case newValue & oldValue are just redundant they are just not use anywhere, but if you wanted to do something on there change then they could help you.

Answer 2

The cordova keyboard plugin can close the native keyboard but not open it (it can open it on android but not ios). This is a interesting problem sometimes with multiple inputs (mostly on ios) I will have the keyboard close and then reopen. If you only need android you can use this plugin to open the keyboard when the toggle is taped using on-tap="foo()", however as far as I know as of now there is now other way to interact with native keyboard or keyboard events. Unless on toggle tap force focus back to the password input, but like you said that is not ideal: give the plugin a try, maybe you can get it working on both platforms. Keyboard Plug-in: https://github.com/driftyco/ionic-plugin-keyboard