Primefaces SelectCheckboxMenu input focus on show

Goal

Primefaces selectCheckboxMenu component having automatic focus on input on show

Description

This recipe will use this suggestion, proposed as a feature improvement for the Primefaces selectCheckboxMenu component. The idea is to allow the filtering input of the component to gain focus automatically when the user clicks the combo to display the options

How to

Basically, all you have to do is add the following Javascript function to any of Javascript files you have for your own application.

/**
 * This makes it possible for the selectCheckboxMenu to get the focus 
 * into the input during the on show event
 * 
 * Proposed by someone (thank you! 🙂 ) 
 * in http://code.google.com/p/primefaces/issues/detail?id=6690
 * 
 */
PrimeFaces.widget.SelectCheckboxMenu.prototype.postShow = function() {
  if (this.filterInput) { // ADDED
    var input = this.filterInput;
    setTimeout(function() {
      input.focus();
    }, 0);
  }
  if (this.cfg.onShow) {
    this.cfg.onShow.call(this);
  }
}

The previous Javascript code defines postShow as a function where the filterInput gets the focus when the selectCheckboxMenu gets its onShow event called.

Explanations

The credits of this solution are not mine (they are from the person that proposed the solution, Denis something.. if you get to this link, thank you 🙂 ). Still, due to its usefulness, I decided to create this recipe to document a little bit the proposal and what it achieves.

Advertisements

2 comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s