Implementing a search bar with clear button (issue on device with clicking or keeping soft keyboard shown)


I am trying to implement a search box with the following:

  1. an inset search icon followed by a input, followed by a clear button (x). The clear button should only clear the search content but not bring the soft keyboard down or animate the search bar out.

  2. A cancel button which will also clear the content, bring the soft keyboard down, and animate the search bar out

  3. If I wrap the inset items in a label as seen in the docs, the ng-click on the clear button wont work because of how ionic treats labels.

  4. If I wrap the inset items in a div, then clicking the clear button will blur the input (before ng-click is fired) which then will cause the keyboard to go down.

Does anyone know of a possible solution that will work on ios/Android/
Of course I can focus again when the clear button is clicked but the keyboard will go down first then come back up which looks funny.

I am currently looking for a solution for ios/Android/Windows phone. When in a div, I can make a call to input.focus() in my clear() function, however since the ng-click is fired AFTER the blur on input, the keyboard will hide and then show again which looks a little quirky…

Any ideas? , Thanks alot in advance.

Posted too fast lol. i ended up wrapping all inset items in the label, and handling the touchstart event for that clear button (via jquery since ng-touchstart wont fire on labels).

Then I set $scope.text = ‘’ in a $timeout to trigger the digest cycle. BOOM.

$clearElement.on('touchstart' , function(){                           
      $timeout(function () {
          $scope.text = '';
      }, 1);

I found an easier way to do this. You can set the on-touch event for the button. Then you can call a function to clear it out. This allows you to wrap the items in a label without using the ng-click event.

1 Like