[jira] Created: (TOMAHAWK-1300) Focus does not work for radio button or check box

["Paul Rivera (JIRA)" <de...@myfaces.apache.org>]

Focus does not work for radio button or check box
-------------------------------------------------

                 Key: TOMAHAWK-1300
                 URL: https://issues.apache.org/jira/browse/TOMAHAWK-1300
             Project: MyFaces Tomahawk
          Issue Type: Bug
    Affects Versions: 1.1.7-SNAPSHOT
         Environment: tomahawk-1.1.7
tomahawk-sandbox-1.1.7
myfaces-1.2.2
tomcat 6.0.16
            Reporter: Paul Rivera
            Priority: Minor


focus tag does not set focus to selectOneRadio or selectManyCheckbox.

given the following code snippet:
<h:form id="mainForm">
  <h:panelGrid columns="2">
    <h:outputLabel for="name" value="Name" />
    <h:inputText id="name" value="#{forAttrBean.name}" required="true"/>

    <h:outputLabel for="gender" value="Gender" />
    <h:selectOneRadio id="gender" value="#{forAttrBean.gender}">
        <f:selectItem itemLabel="Male" itemValue="M"/>
        <f:selectItem itemLabel="Female" itemValue="F"/>
    </h:selectOneRadio>
  </h:panelGrid>

  <s:focus for="gender"/>
</h:form>

The gender radio button(in this case the Male radio button since it is the first one from the group) will not be focused on even though we have the s:focus tag.  Same will happen if you use selectManyCheckbox.  I'm not sure if this is exactly the desired behavior for button groups.  But we can set the focus on the first item of the group instead.

In HtmlFocusRenderer.encodeEnd() LINE 88:
writer.writeAttribute(HTML.SCRIPT_TYPE_ATTR, HTML.SCRIPT_TYPE_TEXT_JAVASCRIPT, null);
writer.writeText("setTimeout(\"document.getElementById('" + clientId + "').focus()\", 100)", null);
writer.endElement(HTML.SCRIPT_ELEM);

The clientId written here is not the ID of the radio button.  Instead, it is the ID of the table containing the radio button.  Here is a sample of the generated html:

<table id="mainForm:gender">
  <tr>		
    <td>
      <input id="mainForm:gender:0" type="radio" name="mainForm:gender" value="M"/>
      <label for="mainForm:gender:0">&#160;Male</label>
    </td>		
    <td>
      <input id="mainForm:gender:1" type="radio" name="mainForm:gender" value="F" />
      <label for="mainForm:gender:1">&#160;Female</label>
    </td>
  </tr>
</table>

HtmlFocusRenderer actually generates the code:
  setTimeout("document.getElementById('mainForm:gender').focus()", 100)
Instead of:
  setTimeout("document.getElementById('mainForm:gender:0').focus()", 100)

I've provided a patch that fixes this for both selectOneRadio and selectManyCheckbox.  The patch is based on revision 673833 of HtmlFocusRenderer.

-- 
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.