Input text field auto-complete does't take the data when I submit the form

Question

I have a login with input data: UserName and Password and submit button. Like this.

The text fields there are filled by Chrome, but when I take that info to do the login process it's like there's no data. I must rewrite all the information in the text fields. I would like this information to be used for the login process. How can I do that?

Controller Class:

public class LoginController extends SelectorComposer<Component>{
    //Wire Components
    @Wire
    private Textbox user;
    @Wire
    private Textbox password;
    @Wire
    private Label message;

    private AuthenticationService serviceAuth = new AuthenticationService();

    /*
     * Method:  doLogin
     * Details: Login function with the data provided: User and password
     * 
     */
    @Listen("onClick=#loginButton")
    public void doLogin(){
        String userName = user.getValue();
        String pass = password.getValue();

        //Now we use the Authenthication service
        if(!serviceAuth.login(userName, pass)){
            message.setValue("Datos ingresados son incorrectos");
            return;
        }

        UserCredential tmpCred = serviceAuth.getUserCredential(); //check
        message.setValue("Bienvenido, "+userName);
        Executions.sendRedirect("/inquiries.zul");
    }
}

Answer 1

This may sounds strange but can you try the following :

<textbox value="@bind(vm.userName) @save(vm.userName, before='submit')"/>
<button onClick="@command('submit')"/>

Like this you will persist the data what's in the textbox again, just before you save.

Edit:

So I search a little bit around and I found a little "hack" for it.
Note that the issue comes from Chrome itself, who doesn't do an onChange event.

So I came up with the following :

<window id="win" border="normal" title="hello" apply="be.chillworld.LoginController" xmlns:w="http://www.zkoss.org/2005/zk/client" >
     <vlayout>
        <textbox id="user"/>   
        <textbox id="password" type="password"/>
        <button label="login" id="loginButton" w:onClick="persistValuesToServer()"/>   
        <script type="text/javascript">
            function persistValuesToServer()
            {
            zAu.send(new zk.Event(zk.Widget.$('win'), 'onUser', jq('$user').val()));
            zAu.send(new zk.Event(zk.Widget.$('win'), 'onPass', jq('$password').val()));
            }
        </script>
    </vlayout>  
</window>


public class LoginController extends SelectorComposer<Component> {

    @Wire
    private Textbox user;
    @Wire
    private Textbox password;

    @Listen("onUser=#win")
    public void autoFillUser(Event e) {
        user.setValue(String.valueOf(e.getData()));
    }

    @Listen("onPass=#win")
    public void autoFillPass(Event e) {
        password.setValue(String.valueOf(e.getData()));
    }

    @Listen("onClick=#loginButton")
    public void doLogin() {
        System.out.println(user.getValue() + " : " + password.getValue());
    }
}

Small explication :
When we press the button, our JavaScript will be triggered first => and we will send 2 events (1 for the username and 1 for the password) to the controller with data what was in the actual textbox.
In the controller, we put the correct data in the textfield and afterwards the real login event is handled.

Is it the perfect solution? Certainly not but it works with a small overhead when we press the button.