Text Box Autofill Not Selecting Value

I have two forms on my application home page. I am using these forms in a popup using render partial (Yii)

Now, the problem is:

On Login form when I select the pre-saved form values(auto-fill) using mouse, it works fine. But when I select it using the keyboard arrow it moves the focus from the test field.

Where as this feature is working fine for sign-up form. Any suggestion…?

Login Form


<div class="login-box">

    <div class="login-row">

        <div class="login-label">Email Address<span class="required">*</span></div>

        <div class="login-input-box"><input class="signup-input" name="LoginForm[EMAIL]" id="LoginForm_EMAIL" type="text" /></div>

        <div class="login-labe"><div class="errorMessage" id="LoginForm_EMAIL_em_" style="display:none"></div></div>

    </div>

    <div class="login-row">

        <div class="login-label">Password<span class="required">*</span></div>

        <div class="login-input-box"><input class="signup-input" name="LoginForm[PASSWORD]" id="LoginForm_PASSWORD" type="password" /></div>

        <div class="login-labe"><div class="errorMessage" id="LoginForm_PASSWORD_em_" style="display:none"></div></div>

    </div>

    <div class="remember-login"><span><input name="" type="checkbox" value="" /></span><p>Remember Password</p></div>

    <div class="forgot-password"><p><a href="/conx/index.php/user/resetpassword">Forgot Password</a></p></div>

    <div class="login-button-box"><input class="login-button" type="submit" name="yt0" value="Login" /></div>

    <div style="clear:both;"></div>

</div>

Sign Up form


<div class="trial-box">

    <div class="login-row">

        <div class="trial-label">First Name<span class="required">*</span></div>

        <div class="login-input-box"><input class="signup-input" name="TrialForm[firstName]" id="TrialForm_firstName" type="text" /></div>

        <div class="login-labe"><div class="errorMessage" id="TrialForm_firstName_em_" style="display:none"></div></div>

    </div>

    <div class="login-row">

        <div class="trial-label">Last Name<span class="required">*</span></div>

        <div class="login-input-box"><input class="signup-input" name="TrialForm[lastName]" id="TrialForm_lastName" type="text" /></div>

        <div class="login-labe"><div class="errorMessage" id="TrialForm_lastName_em_" style="display:none"></div></div>

    </div>

    <div class="login-row">

        <div class="trial-label">Email Address<span class="required">*</span></div>

        <div class="login-input-box"><input class="signup-input" name="TrialForm[email]" id="TrialForm_email" type="text" /></div>

        <div class="login-labe"><div class="errorMessage" id="TrialForm_email_em_" style="display:none"></div></div>

    </div>

    <div class="login-row">

        <div class="trial-label">Password<span class="required">*</span></div>

        <div class="login-input-box"><input class="signup-input" name="TrialForm[password]" id="TrialForm_password" type="password" /></div>

        <div class="login-labe"><div class="errorMessage" id="TrialForm_password_em_" style="display:none"></div></div>

    </div>

    <div class="login-button-box"><input class="login-button" type="submit" name="yt1" value="Submit" /></div>

    <div style="clear:both;"></div>

</div>