How to disable focus for the first input in a Prim

Question

I have a Dialog in my Page, which contains a input field (Date, Calendar) . The problem is that the calendar opens directly after opening the dialog, because the focus is set on the first input.

Is there a way to disable focus in Primefaces?

Answer 1

add this script in your .xhtml :

    PrimeFaces.widget.Dialog.prototype.applyFocus = function () {
        var firstInput = this.jq.find(':not(:submit):not(:button):input:visible:enabled:first');
        if (!firstInput.hasClass('hasDatepicker')) {
            firstInput.focus();
        }
    }

Answer 2

Another trick to fix this issue:

I have added a text input as first input of the dialog in my dialog:

<p:dialog id="myDialogId" widgetVar="myDialog"....

  <p:inputText id="fixForFocusProblem"/>

  <p:calendar ...
  ..
</p:dialog>

And when showing the dialog I call this:

$('#myForm\\:fixForFocusProblem').show();
myDialog.show(); 
$('#myForm\\:fixForFocusProblem').hide();

This way the focus gets on the input text which gets immediately unvisible.

Not so nice but it works without visually disturbing.

Answer 3

This will also do:

<p:dialog onShow="$(document.activeElement).blur()" ...>

Or Primefaces jQuery

<p:dialog onShow="jQuery(document.activeElement).blur()" ...>

Answer 4

You can change the default behavior;

http://forum.primefaces.org/viewtopic.php?f=3&t=29050

You can always override default behaviors of widgets, for example to prevent calendar focus on dialog opening;

PrimeFaces.widget.Dialog.prototype.applyFocus = function() {
  var firstInput = this.jq.find(':not(:submit):not(:button):input:visible:enabled:first');
  if(!firstInput.hasClass('hasDatepicker')) {
      firstInput.focus();
  }
}

original code is;

PrimeFaces.widget.Dialog.prototype.applyFocus = function() {
  this.jq.find(':not(:submit):not(:button):input:visible:enabled:first').focus();
}

If you put your override after PrimeFaces resources then your applyFocus implementation will be picked up and used instead.

I'd suggest creating a js file like primefaces-overrides.js and put things like this inside, one disadvantage though since you are coding against low level apis, you need to watch out for regressions during migrations although we aim to keep backward compatibility as much as we can.

Answer 5

Something simpler could be set focus by default in another input you have.

<p:dialog id="dialog" header="Users" focus="savebtn" widgetVar="txtName">

If you are calling from another file

<p:dialog id="dialog" header="Users" focus="savebtn" widgetVar="formRegUsers:txtName">