Keyboard triggered on blur

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 || ''; = {value: '', focus: false};
    if (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(); = '';

    // 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 = 1;
      // Add a class to indicate focus to the search bar and the content area
      // We need to call `$digest()` because we manually changed the model
    // When the user leaves the search bar
    angular.element(inputElement).bind('blur', function() { = 0;

  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>' +

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


1 Like


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


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

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

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" >

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