Changing p:autoComplete default behaviour when tabbing away

Question

I'm using the primefaces-7.0.jar, so I'm assuming I'm using version 7.

I have a p:autocomplete, It's populated with 'codes' that the user has used in the past. The user is allowed to enter other codes that aren't in the list, when the p:autocomplete loses focus the code is validated to see if the user is allowed to use that code.

In the current version if the user types in the input box, then tabs away the input populates with the 'best' match from the list. In the previous version if there was no match the input box would store and submit what the user had typed in.

I think in the previous version this was a bug and has been fixed, but, this is the behaviour I want.

Is there a way to have the autocomplete component behave in the way that it did before it was fixed?

I've tried changing several of the attributes and had no luck.

I think I may need to override or customize this behaviour but I don't know where to start.

It must be using javascript (jquery?) where can I find what it's doing? Can I override it? How?

I feel like the key must lie here https://primefaces.github.io/primefaces/jsdocs/modules/jquery.html#autocomplete but honestly I'm not sure where to begin. The documentation seems to assume a knowdlege of the components that I just don't have.

I think I might have to override invokeItemSelectBehavior, but I don't really know, and I don't know if that's possible.

Here's the code from the xhtml, lightly modified

    <p:autoComplete
        disabled="#{empty currentBean.formA.serviceDate}"
        id="userCode" dropdown="true" scrollHeight="200"
        value="#{currentBean.formA.userCode}"
        completeMethod="#{currentBean.completeUserCode}"
        forceSelection="false"
        var="userCode" itemLabel="#{userCode.code}" itemValue="#{userCode}"
        converter="userCodeConverter" 
        styleClass="userCodeInput" 
        inputStyle="width: 150px"
        cache="true"
        onchange="invokeConditionally();"
        widgetVar="userCodeWidgetVar"
        >

        <p:column>
            <h:outputText value="#{userCode.code}"/>
        </p:column>

        <p:column>
            <h:outputText value="#{userCode.description}" />
        </p:column>                                
        
        <p:ajax event="query" process="@this" update="userCodeSectionMsg"/>


        <p:ajax event="itemSelect"   
            onstart="clearChangeEvent();" 
            update="<several things are updated here>"
            process="@this"
            listener="#{currentStepBean.calculateUserAmount}" />
        
    </p:autoComplete>

here's the invokeConditionally method, also in the xhtml:

    var delayedChangeEvent = null;
        function invokeConditionally() {
                        
          delayedChangeEvent = setTimeout(function(){
              var _formId = $('.userCodeInput').closest("form").attr('id');
              var _source = $('.userCodeInput').attr('id');
              var _update = [$('.internationalEntryGroup').attr('id'),
                  $('.applianceEntryGroup').attr('id'),$('.drugEntryGroup').attr('id'), 
                  $('.userAmountSection').attr('id'),$('.overrideuserAmountSection').attr('id'), 
                  $('.addButtonSection').attr('id'),$('.userCodeSectionMsg').attr('id')];
         
              PrimeFaces.ajax.Request.handle({
                  formId: _formId,
                  source: _source,
                  update: _update,
                  event: 'itemSelect'
              });
             }, 500);
        }

Any help is appreciated.

Thanks

Isn't forceSelection enough? If you try with simple autoComplete with it, what's the problem? — WoAiNii
no, I'm afraid forceSelection does not change the behaviour of the component. Let's say I'm in the input box and I type '5', the list below the box populates with several values, then I hit tab, the box automatically populates with the top value from the list, in this case '40B', but what I wanted in the box was the '5'. This was the behaviour in the previous version. Or am I not understanding what you're asking me? Thanks @WoAiNii — JohnL
I tryed with a basic autoComplete with autoSelection and forceSelection, both set, to false and it seems like your desired behavior, isn't it? — WoAiNii

JohnL JohnL · Accepted Answer · 2020-09-16T15:29:36

LOL! I had the wrong documentation! autoHighlight was not described in my version of the docs.

Changing p:autoComplete default behaviour when tabbing away

1 Answers