Inheriting events from original element?

[SFPink]

Hello again,

Is there a built in method of inheriting events.

Example:

When chosen.js is called to add mask is there a way to pass the onBlur() method.

I prefer not to temper with the library which is why i ask here first.

Thanks

[pfiller]

The only native event Chosen triggers on the original select field is change. There aren't currently any plans to add something like blur or focus. I think that might create weird situations where your code thinks two elements have focus and I'd be hesitant to move forward with that.

I would consider adding custom events that indicate when Chosen is active / inactive. This way, you could monitor the field for both blur and chosen:inactive. The closest thing Chosen triggers right now is chosen:showing_dropdown and chosen:hiding_dropdown, but those are definitely not the same kind of event.

[bondz]

I was wondering the same thing but with a method. If chosen could inherit the 'Title' property and probably all 'data-*' properties too.

[SFPink]

Okay thanks for the reply, I will try and figure out another method. Thanks again.

I fixed the issue regardless I over look the onChange() which in turn is triggered by the mask, Thanks

[tjschuck]

@harvesthq/chosen-developers I have declared this to be the canonical ticket for the blur/focus issue -- see the couple of closed references above for dupes.

Correct me if I'm wrong, though, and there's some other ticket that's the king of this issue.

[EmADgine]

This really is a gross oversight in an otherwise wonderful plugin - focus/blur events are essential and I hope it is added soon.

[javiplav]

It'll be great to have focus/blur events added! Chosen is a great plugin.

[vannanna]

Is there any way to fake blur? For me problem is to get data from chosen select..

[qrobin]

Guys, I have found a decision. U just should override theese two functions:

Chosen.prototype.results_reset = function() {
      this.form_field.options[0].selected = true;
      this.selected_option_count = null;
      this.single_set_selected_text();
      this.show_search_field_default();
      this.results_reset_cleanup();
      this.form_field_jq.trigger("change");
      this.form_field_jq.trigger("blur");
      if (this.active_field) {
        return this.results_hide();
      }
    };

and

AbstractChosen.prototype.input_blur = function(evt) {
      var _this = this;

      if (!this.mouse_on_container) {
        this.active_field = false;
        this.form_field_jq.trigger("blur");
        return setTimeout((function() {
          return _this.blur_test();
        }), 100);
      }
    };

And then use it like this:

$('.chosen').blur(function () { 

}); 

$('.chosen').focus(function () { 

}); 

[paraline-phund]

Maybe use chosen:hiding_dropdown
$('.chosen-select').on('chosen:hiding_dropdown', function() { // code });