Keyboard triggered on blur

ionic-v1
1

I’m not sure what’s going on, but every time I close the keyboard by clicking on the cancel button, it will come up again. Looks like there is a delay on the “tap” and it would click again to “focus” on the input field and open the keyboard again. The weirdest thing is that if I type on this “second” keyboard, nothing will be added to the search field.

This is the directive:

var searchDirective = function($timeout) {
return {
  restrict: 'E',
  replace: true,
  scope: { search: '=?filter' },
  link: function(scope, element, attrs) {
    scope.placeholder = attrs.placeholder || '';
    scope.search = {value: '', focus: false};
    if (attrs.class) {
      element.addClass(attrs.class);
    }

    // We need the actual input field to detect focus and blur
    var inputElement = element.find('input')[0];

    // This function is triggered when the user presses the `Cancel` button
    scope.cancelSearch = function() {
      // Manually trigger blur
      inputElement.blur();
      scope.search.value = '';
    };

    // When the user focuses the search bar
    angular.element(inputElement).bind('focus', function () {
      // We store the focus status in the model to show/hide the Cancel button
      scope.search.focus = 1;
      // Add a class to indicate focus to the search bar and the content area
      element.addClass('search-bar-focused');
      angular.element(document.querySelector('.has-search-bar')).addClass('search-bar-focused');
      // We need to call `$digest()` because we manually changed the model
      scope.$digest();
    });
    // When the user leaves the search bar
    angular.element(inputElement).bind('blur', function() {
      scope.search.focus = 0;
      element.removeClass('search-bar-focused');
      angular.element(document.querySelector('.has-search-bar')).removeClass('search-bar-focused');
    });
  },


  template: '<div class="search-bar item-input-wrapper">' +
  '<i class="icon ion-ios-search placeholder-icon"></i>' +
  '<input type="search" placeholder="Search Auror" onfocus="this.placeholder = \'\'" onblur="this.placeholder = \'Search Auror\'" ng-model="search.value">' +
  '<button class="button button-clear btn-small" ng-show="search.focus" ng-click="cancelSearch()">' +
  'Cancel' +
  '</button>' +
  '</div>'
};
};

Check this gif :slight_smile:
Any ideas about what is going on?

Thanks!!

image
keyboard-bug.gif658×1172 729 KB

1 Like
2

Hi,

I have the same issue.
It is only happening in iOS and i’m using the ionic keyboard plugin.

$cordovaKeyboard.close();

I tried ussing onBlur event but that also doesn’t help.

3

Any solution to this. I have the same with latest ionic keyboard plugin 2.2.1

4

I had something similar.
Try something like this

<div class="search-bar item-input-wrapper">
  <i class="icon ion-ios-search placeholder-icon"></i>
  <input type="search" placeholder="Search Auror" onfocus="this.placeholder = \'\'" onblur="this.placeholder = \'Search Auror\'" ng-model="search.value">
<div ng-click="cancelSearch()" >
  <button class="button button-clear btn-small"  ng-show="search.focus" >
  Cancel
  </button>
<div>
  </div>

If its not working try instead of ng-show, ng-if.
It solved the issue for me