1. When the initial suggestions list for an autocomplete field is too long to display below the control, it correctly gets displayed above. But when it subsequently changes length as you type, the top of the suggest list stays in the same place. This creates 2 possible problems:
a) If the list shortens, its bottom becomes detached from the text field.
b) If the list becomes longer, it may start overlapping the text field where you're typing.
2. On a related note, when a suggestions list initially is short enough to display below, and then becomes longer as you type, it does not flip to go above the text field. Instead it just lengthens below, and increases page size - causing a scrollbar to appear.
3. If the mouse pointer is located over the place where the suggestions list will appear, then when you start typing and the suggestions list appears, both the top suggestion, and the one under the mouse pointer become selected. If you subsequently scroll through the suggestions with cursor keys, both "selected" items respond to the cursors, so they both move up and down:
In fact, by playing around with the cursor keys and the mouse for a bit, you can get any number of items to become "selected".
4. In some cases selecting a suggested item by mouse click does not work. The suggestion list disappears as though the selection succeeded, but the text field is not updated with the selected value - it just contains whatever was typed. Admittedly, this only happens for this fairly complex suggestion list definition. I haven't been able to get it to fail on simpler layouts. Code for this one looks like this:
Code: Select all
<p:autoComplete id="address" value="#{cc.attrs.address.search}"
size="65" styleClass="#{cc.attrs.address.selectedAddressInternal ? 'italic-input' : ''}"
var="addressSuggestion"
converter="#{addressSearchByIdConverter}"
completeMethod="#{cc.attrs.address.getSuggestedAddresses}"
itemLabel="#{addressSuggestion.displayName}"
itemValue="#{addressSuggestion}" queryDelay="350" maxResults="21">
<p:column>
<h:panelGrid columns="3" cellpadding="0" cellspacing="0">
<h:outputText rendered="#{!empty addressSuggestion.addressType.iconType}"
styleClass="#{hb:concat('tpt-icon16 tpt-icon16-', addressSuggestion.addressType.iconType, '')}"/>
<p:outputPanel rendered="#{!empty addressSuggestion.aliasId}">
<h:outputText value="#{addressSuggestion.addressAlias}"
style="font-weight: bold;"/>
<h:outputText value=" (#{hb:abbreviate(addressSuggestion.displayName, 40, 50, '...')})"
styleClass="#{addressSuggestion.externalAddress ? '' : 'italic'}"/>
</p:outputPanel>
<h:outputText rendered="#{empty addressSuggestion.aliasId}" escape="false"
value="#{hb:htmlBoldMatches(addressSuggestion.displayName,cc.attrs.address.lastSearchAddress)}"
styleClass="#{addressSuggestion.externalAddress ? '' : 'italic'}"/>
</h:panelGrid>
</p:column>
</p:autoComplete>
