Focus on inputText with material css.

[MSet7]

Issue Overview

How to set a focus to a p:inputText with material css.

Current Behaviour

Cursor not in inputText

Expected Behaviour

cursor in inputText when the page is loaded.

How to reproduce

Just add <p:focus for="email"/> to login starter page (material).

Additional Information

• AdminFaces version: 1.0.0-RC18
• PrimeFaces version: 6.2
• JSF implementation: 2.3

[rmpestano]

Hi, unfortunately the material inputs are processed on page load (see here) hence the initial focus gets lost.

The only workaround I can think now is to set the focus after an initial delay:

$(document).ready(function () {
                setTimeout(function () {
                    $('#email').focus();
                }, 250);
            });

$(document).on("pfAjaxComplete", function () {
                setTimeout(function () {
                    $('#email').focus();
                }, 250);
            });

[lfpaz]

I know this issue is old, but i used this workaround in a external JS file:

var oldAdminMaterial = adminMaterial;

adminMaterial = function () {
    var x = document.activeElement.id;
    var xValue = document.activeElement.value;
    oldAdminMaterial();
    if (x) {
        document.getElementById(x).value = xValue;
        document.getElementById(x).focus();
    }
} 

with this, the <p:focus/> work in any situation i ever have tested. The value copy is needed for pages when <p:autocomplete/> is the first component in page.

@MSet7 @rmpestano

[rmpestano]

Hey @lfpaz, can you open a PR?

I'm trying to get the project back on track by updating to the latest PrimeFaces and would be nice to incorporate this fix.

Thank you in advance!

[lfpaz]

@rmpestano i will open in next days. I'm busy now with the preparations of birth of my son.

[rmpestano]

Thanks @lfpaz! No rush as I'm also quite busy here.

Cheers!