SelectBooleanCheckbox无需鼠标悬停即可获得焦点

Question

I have a weird problem with jsf components (h:inputFile & h:selectBooleanCheckbox).

Both components receive focus, even when my mouse is somewhere else on the page. Here is the 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>

If I move the mouse over the h:outputText the checkbox receives focus. I had the same problem with the h:inputFile tag. I solved it by surrounding it with ah:outputLabel tag, but unfortunately it doesn´t workd with the selectBooleanCheckbox.

Did somebody have the same problem in the past and knows a solution?

Answer 1

This is because everything is wrapped in the h:outputLabel tag. This outputLable is rendered as a plain label html element.

You can see form the W3C specification that anything inside the label will toggle the control

The element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control

To fix this, you need to replace the h:output label tag using ah:panelGroup layout="block" which renders a <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>