Conflict between simultaneous events in Knockout.js

1

I’m working on wikipedia viewer project. I have decided to use Knockout.js as framework MVC, but I have a problem with two events that trigger simultaneously.

I have created a search field and a div with an “x” character for clearing the text. The input field is binded to focus and blur events, and the little “x” is binded to a click event.

The problem happens when the user clicks on “x”, then the input field lost focus and the blur event is triggered. I’d like that it was a click event instead.

Someone has a clue on that?

<form class="form" data-bind="submit: processSearch">

    <div class="form-group text-center search">
      <!-- Search -->
      <div class="input-container">
        <input type="search" class="form-control text-center"
          data-bind="textInput: search, event: { focus: focusSearch, blur: processSearch }, blurBubble: false">
        <div class="clear-container" data-bind="click: clearSearch, clickBubble: false">
          <i class="fa fa-times" aria-hidden="true"></i>
        </div>
      </div>
    </div>
  </div>