Xpages typeahead in dialog does not work unless onChange triggered first

Question

UPDATED at bottom...

I have a custom control that contains an input field with typeAhead enabled:

<xp:inputText id="UTAN1" value="#{document1.UTAN}"
    maxlength="5" styleClass="dbListFieldData" style="width:60px;font-size:13px;">
    <xp:typeAhead mode="full" minChars="2">
        <xp:this.valueList><![CDATA[#{javascript:var key = getComponent("UTAN1").getValue();
var path = new Array("","utans.nsf")
@Unique(@DbLookup(path,"(UTAN Lookup)",key,1,"[PARTIALMATCH]"));}]]></xp:this.valueList>
    </xp:typeAhead>
    <xp:eventHandler event="onchange" submit="true"
        refreshMode="partial" refreshId="utanPanel1">
        <xp:this.action>
            <!-- DO SOME STUFF -->  
        </xp:this.action>
    </xp:eventHandler>
</xp:inputText>

If I use the control inline on an xpage, typeAhead works fine.

However, if I insert the control in a dialog and call it to open:

<xp:link escape="true" id="link3" styleClass="dbListFieldData" >
    <xp:eventHandler event="onclick" submit="false" id="eventHandler3">
        <xp:this.script><![CDATA[XSP.openDialog('#{id:miniDialogUTAN1}');]]></xp:this.script>
    </xp:eventHandler>
    <xp:image id="image2" url="/edit2.png" style="height:16px;width:16px;" alt="Edit UTAN"></xp:image>
</xp:link>

The typeAhead seems to be partly crippled.

If the field is already empty, suggestions comes up fine.
If the field has an existing value, backspacing only shows the existing value as a suggestion.
Overwriting the value entirely gives no suggestions at all.

The only thing that will get the typeAhead working is to change the value and hit Enter. Basically, trigger an onChange. After that, ALL the typeAhead fields start working.

Any ideas on how to correct this behavior? FYI, I'm an xpages noob, so please go easy on me.

UPDATE 6/29/2021:

I'm still desperately in need of help with this. I've been playing around with Firebug and found something interesting.

In type-aheads on a normal Xpage form (where type-ahead works), entering each character calls a POST every time. However, when the type-ahead is in a dialog, typing in characters calls GETs. If I hit Enter or tab out of the field (triggering onChange), I get a single POST, and then clicking back into the field and typing, it starts using GETs again and it pulls valid suggestions as long as I don't backspace and type something different. Then the suggestions go away. This would be expected since GETs are cached and POSTs are not.

So what's going on with type-aheads in dialogs that makes them use GET, and how to I force it to use POST on every key press?

Hi Marcus, welcome to Stack Overflow. Try setting partialRefresh="false" on the xe:dialog. It might be a wild shot but give it a try. — Per Henrik Lausten
Thanks, that didn't do it. I also tried setting refreshOnShow to both true and false with no luck.I wonder if I'm on the wrong track with the onChange. What gets the typeAhead working again is modifying the field value and hitting enter. What else happens when the Enter key is pressed while in the field? Is there an attempt to submit the form? I notice that even when I have multiple typeAhead fields on the dialog, the Enter key trick makes all of them work again. — MarcusWelby
Sorry I'm still trying to figure th8ings out here and didn't know how to tag you properly. @perlausten — MarcusWelby

MarcusWelby MarcusWelby · Accepted Answer · 2021-07-18T05:10:35

To people of the future...

After weeks of fretting over this and finally giving up I stumbled upon the solution by accident.

My dialog opens in read mode. I have both an Edit button and a Cancel button at top and bottom that were originally hard coded in both spots of the dialog custom control. Later I went to clean some stuff up and decided to create a single custom control for both sets of buttons. Once I did that, suddenly the type-aheads worked!

It turns out that when I copied and pasted the XML from the (supposedly) duplicate button panels to the new custom control, I had copied from the bottom button panel (which I rarely used while testing).

When I compared the XML for the top and bottom Edit Buttons, I found that the top one had the following attributes in the onClick:

<xp:eventHandler event="onclick" submit="true" refreshMode="complete">

while the bottom one had:

<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="dialogOuterPanel1">

So, the full refresh broke my type-aheads and a partial refresh fixed them.

Xpages typeahead in dialog does not work unless onChange triggered first

1 Answers