SelectBooleanCheckbox reçoit focus sans mouseover

Question

J'ai un problème étrange avec les composants jsf (h: inputFile & h: selectBooleanCheckbox).

Les deux composants reçoivent le focus, même lorsque ma souris se trouve ailleurs sur la page. Voici le code:

<h:form id="logoUpload" enctype="multipart/form-data"> 
    <div>  
    <h:outputLabel rendered="true"> 
     <h:inputFile id="companyLogo" label="file" value="#{fileHandlerBean.part}" > 
     <f:validator validatorId="FileUploadValidator" /> 
     </h:inputFile> 
    </h:outputLabel> 
</div> 

<div class="clear" /> 

<h:outputLabel rendered="true"> 
<div> 
    <div style="width: 5%"> 
    <h:selectBooleanCheckbox id="acceptToULogo" value="#{companyEditController.confirmToU}"> 
    <p:ajax event="change" update="buttonLogo" /> 
    </h:selectBooleanCheckbox> 
</div> 

    <div style="width: 95%"> 
    <h:outputText value="Some Text " /> 
    </div> 
<br /> 

<h:commandButton id="buttonLogo" styleClass="formbutton" value="Upload" 
     action="#{companyEditController.companyLogoUpload()}" 
     actionListener="#{fileHandlerBean.uploadCompanyLogo()}" 
     disabled="#{!companyEditController.confirmToU}"/>  
</div> 
</h:outputLabel> 
</h:form> 

Si je déplace la souris sur le h: outputText, la case à cocher reçoit le focus. J'ai rencontré le même problème avec la balise h: inputFile. Je l'ai résolu en l'entourant d'une balise h: outputLabel, mais malheureusement elle ne fonctionne pas avec selectBooleanCheckbox.

Est-ce que quelqu'un avait le même problème dans le passé et connaît une solution?

Answer 1

Cela est dû au fait que tout est enveloppé dans la balise h: outputLabel. Ce fichier outputLable est rendu en tant qu'élément html en clair.

Vous pouvez voir la forme W3C specification que tout à l'intérieur de l'étiquette basculera le contrôle

L'élément ne rend pas quelque chose de spécial pour l'utilisateur. Cependant, il offre une amélioration de la facilité d'utilisation pour les utilisateurs de souris, parce que si l'utilisateur clique sur le texte dans l'élément, il permet de basculer le contrôle

Pour résoudre ce problème, vous devez remplacer la balise h: étiquette de sortie en utilisant ah: panelGroup layout = "bloc" qui rend une <div>:

<h:panelGroup layout="block" rendered="true"> 
<div> 
    <div style="width: 5%"> 
    <h:selectBooleanCheckbox id="acceptToULogo" > 
    <p:ajax event="change" update="buttonLogo" /> 
    </h:selectBooleanCheckbox> 
</div> 

    <div style="width: 95%"> 
    <h:outputText value="Some Text " /> 
    </div> 
<br /> 

<h:commandButton id="buttonLogo" styleClass="formbutton" value="Upload"/>  
</div> 
</h:panelGroup>