jsfの罠

入力項目のvalidatorやrequiredのチェックをする場合にラベルにforで関連付ける

<ui:label binding="#{foo$bar}" for="dropDown1" id="label1" text="label1">
  <ui:dropDown binding="#{foo$bar}" id="dropDown1" items="#{foo$bar.objectArrayDataProvider1.array}" required="true"/>

こうして出来上がったHTMLソースはこんな感じ

<label id="main:label1" for="main:dropDown1" class="class1">
  <img id="main:dropDown1_required" src="required.gif"/>
dropDown1
</label>
<select class="MnuStd" id="main:dropDown1" name="main:dropDown1" size="1">
  <option class="MnuStdOptSel" value="option1" selected="selected">option1</option>
</select>

ところがこうするとhtmlの仕様なのかlabel1をクリックしたときにdropDown1にフォーカスが移ってしまう
これだけならばまだ良かったのだが、ドロップダウンの場合何故か勝手に先頭の項目が選択される
このときdropDown1でAjaxを使ってたりするとドロップダウンのイベントが走らず不整合が起こる
ひとまずラベルにonClick="return false;"とすることでこの問題は解消された
本来jspでのforは単なる関連付けなのにhtmlにもそのままforが設定されることが根本的な問題な気がする