Lotus Xpages TypeAhead option changes the DOM id of the label

Question

lotus changes the generated id of a label for an input text field, if the type-ahead field is enabled for that field.

1. The source on the xpage without type-ahead:

<xp:tr> <th scope="row">
<xp:label id="labelClientRapporteur" for="clientRapporteur"> <xp:this.value><![CDATA[${javascript:clientData['clientRapporteur']}]]></xp:this.value> </xp:label> </th> <xp:td> <xp:inputText id="clientRapporteur" value="#{complaintDocument.clientRapporteur}">
</xp:inputText> </xp:td> </xp:tr>

2. And the source of the page in the browser:

<tr> <th scope="row"> <label id="view:_id1:_id2:_id31:_id45:labelClientRapporteur" class="xspTextLabel" for="view:_id1:_id2:_id31:_id45:clientRapporteur">Ügyfélreferens</label> </th> <td> <input id="view:_id1:_id2:_id31:_id45:clientRapporteur" class="xspInputFieldEditBox" type="text" name="view:_id1:_id2:_id31:_id45:clientRapporteur"> </td> </tr>

3. The code of the xpage in case of type-ahead enabled for the same input:

<xp:tr> <th scope="row">
<xp:label id="labelClientRapporteur" for="clientRapporteur"> <xp:this.value><![CDATA[${javascript:clientData['clientRapporteur']}]]></xp:this.value> </xp:label> </th> <xp:td> <xp:inputText id="clientRapporteur" value="#{complaintDocument.clientRapporteur}"> <xp:typeAhead mode="partial" minChars="1" ignoreCase="true" valueList="#{javascript:return namesTypeAhead();}" var="lupkey" valueMarkup="true"> </xp:typeAhead> </xp:inputText> </xp:td> </xp:tr>

4. And the source of the page with type-ahead field in the browser:

<tr> <th scope="row"> <label id="view:_id1:_id2:_id31:_id45:clientRapporteur_label" class="xspTextLabel" for="view:_id1:_id2:_id31:_id45:clientRapporteur">Ügyfélreferens</label> </th> <td> <span id="view:_id1:_id2:_id31:_id45:_id78" mode="partial" jsid="view__id1__id2__id31__id45__id78" dojotype="ibm.xsp.widget.layout.data.TypeAheadReadStore"></span> <div id="widget_view:_id1:_id2:_id31:_id45:clientRapporteur" class="dijit dijitReset dijitInlineTable dijitLeft xspInputFieldEditBox dijitTextBox dijitComboBox" role="combobox" widgetid="view:_id1:_id2:_id31:_id45:clientRapporteur" aria-labelledby="view:_id1:_id2:_id31:_id45:clientRapporteur_label"> </td> </tr>

5. The generated id for the label is:

view:_id1:_id2:_id31:_id45:clientRapporteur_label

, instead of the

view:_id1:_id2:_id31:_id45:clientRapporteur

. The problem is, that I use

setTextLabelForRequired("#{id:labelClientRapporteur}");

to change the style of the label, and this code does not work in this case, because of the changed id of the label.

I would like to know how to fix this id-changing, or what is the best work-around?

Answer 1

Here's a feasible workaround as i see it. The optimal would be to have the unique jsid ofc.

This will

1. loop all nodes with selector
2. loop all textboxes
3. lookup registered widget via domNode (not sure how logic is but via Id is definately better)

So:

var arr = dojo.filter(dojo.query('.xspInputFieldEditBox'), function(domNode) {

   if(/labelClientRapporteur/.test(domNodes.className))
      return true;

});
var widget = dijit.getEnclosingWidget(arr[0]);

Or a little more loosely matched:

var nodes = dojo.query('.xspInputFieldEditBox[id*="labelClientRaporteur"]');
var domNode = nodes[0];