Chrome etc. Password "helper" problem

[tony.herstell]

Hi Guys

https://risingstars.co.nz/atlas

login area at top right...

Can't enter text without the panel closing when shrunk down to mobile size OR on a mobile.

Can use "tab" (on PC); but no workaround for a mobile.

Code: Select all

   <div class="topbar">

		 <!-- style="background-color: white" -->
		<div class="logo" style="margin-top:0px; vertical-align: bottom; !important">
			<p:graphicImage name="images/brand/horsebox_white.png" library="atlas-layout" style="width:90%; display: block" />
		</div>

        <p:outputLabel style="font-size:30pt; margin-left:10px; font-weight: bold; color: white">Atlas</p:outputLabel>

        <a id="topbar-menu-button" href="#">
            <i class="fa fa-bars"></i>
        </a>
                        
        <ul class="topbar-menu fadeInDown animated">
            <li class="profile-item">
                <a href="#">
                	<p:outputPanel id="loginDataArea">
	                	<p:outputPanel rendered="#{loginController.isLoggedIn()}">
		                    <div class="profile-info">
		                        <span class="topbar-item-name profile-name"><h:outputText value="#{identityService.name}"/></span>
		                        <p:outputLabel id="user-role" styleClass="topbar-item-name profile-role" value="#{loginController.role()}"/>
		                        <p:tooltip for="user-role" value="#{loginController.roles()}" position="bottom" trackMouse="true" />
		                    </div>
	                    </p:outputPanel>
                    </p:outputPanel>
                </a>
            </li>
            
            <li>
                <p:outputPanel id="loginControlsArea">
		            <h:form id="loginForm" rendered="#{!loginController.isLoggedIn()}">
		            	<p:inputText value="#{loginController.email}"/>
		            	<p:password value="#{loginController.password}"/>
	   		        	<p:commandButton actionListener="#{loginController.login()}" update="loginDataArea loginControlsArea profileControlsArea logoutControlsArea menu-area" style="color:white; vertical-align:middle" value="Login" icon="fa fa-fw fa-sign-in" />
	   		        	<p:commandButton action="#{registrationController.startRegistration()}"  style="color:white; vertical-align:middle" value="Register" icon="fa fa-fw fa-user-plus"/>
		            </h:form>
	            </p:outputPanel>
            </li>
            
            <li>
                <p:outputPanel id="profileControlsArea">
		            <h:form id="ProfileForm" rendered="#{loginController.isLoggedIn() and loginController.isUserInRole('SUPERUSER')}">
			            <i style="color:white; vertical-align:middle" class="fa fa-fw fa-user"></i>
	   		        	<p:commandButton actionListener="#{loginController.profile()}" style="color:white; vertical-align:middle" value="Profile" />
		            </h:form>
	            </p:outputPanel>
            </li>
            
            <li>
                <p:outputPanel id="logoutControlsArea">
		            <h:form id="logoutForm" rendered="#{loginController.isLoggedIn() and loginController.isUserInRole('SUPERUSER')}">
		            	<i style="color:white; vertical-align:middle" class="fa fa-fw fa-sign-out"></i>
	    	        	<p:commandButton action="#{loginController.logout()}" update="loginDataArea loginControlsArea profileControlsArea logoutControlsArea menu-area" style="color:white; vertical-align:middle" value="Logout" />
		            </h:form>
	            </p:outputPanel>
            </li>
            
        </ul>

[tony.herstell]

The best I can figure is that the class "topbar-menu" calls the js for the button presses inside the pulldown.
How do I move the action to the commandbutton presses only so that clicking to add email/password does not fire.

Its a useful component and I trying to save space on the top bar by having the email/password and login form on the dropdown.

[Melloware]

Hmmm this one is tricky without being able to debug it.

[tony.herstell]

I guess as its on https://risingstars.co.nz/atlas
you may be able to use the browser tools.
but I think altering the .js is the answer and that's not easy.

[mert.sincan]

Hi,

Please try;

Code: Select all

//layout.js
...

 _bindEvents: function() {
       ....
       
       this.topbarMenu.find('input').off('click.topbar').on('click.topbar', function(e) { // please add this line
            $this.topbarLinkClick = true;
        });
 }

Best Regards,

[tony.herstell]

It worked.
Thank you so much!
I cant see that its broken anything (so far).

[mert.sincan]

Glad to hear, thanks a lot for the update!

Best Regards,

[tony.herstell]

FYI
Since the recent update of Android phones (rolling out to some it seems), it appears this is now failing on a lot of Android phones.
This still works for Apple phones.
I am being forced to write a new Login page to allow "social login" so this problem may be superceeded

[siris]

Hi,

We have released a big update! Could you please try the latest update with PrimeFaces X and share the changes on this issue?

Best Regards,

[tony.herstell]

Legends!
Will try today.