Autocomplete Ajax itemUnselect is not working in PrimeFaces 10

[ltong]

Hi,
We implemented an Autocomplete element with itemSelect and itemUnselect Ajax events to save the actions. The Ajax itemSelect handling event works. But when clicking on the 'X' icon to remove/unselect an item, the following error showed up in Chrome Console:

Code: Select all

components.js.xhtml?ln=primefaces&v=10.0.0&e=10.0.0:formatted:1324 Uncaught TypeError: c.attr is not a function
    at c.removeItem (components.js.xhtml?ln=primefaces&v=10.0.0&e=10.0.0:formatted:1324)
    at HTMLSpanElement.<anonymous> (layout.js.xhtml?ln=serenity-layout:802)
    at HTMLUListElement.dispatch (jquery.js.xhtml?ln=primefaces&v=10.0.0&e=10.0.0:2)
    at HTMLUListElement.v.handle (jquery.js.xhtml?ln=primefaces&v=10.0.0&e=10.0.0:2)

Code: Select all

    removeItem: function(c) {
        var d = this
          , e = "";
        if (d.input.hasClass("ui-state-disabled")) {
            return
        }
        if (typeof c === "string" || c instanceof String) {
            e = c
        } else {
            e = c.attr("data-token-value") // Error at this line
        ....

Version: PrimeFaces 10.0.0
Faces Implemention: javax.faces 2.3.9
Server: Tomcat 9.0.48

JSF code example:

Code: Select all

<p:autoComplete id="other-view-institutions" value="#{viewReport.otherInstitutions}" completeMethod="#{institutionAutoComplete.onInstitutionSuggestionsFired}"
                                var="institution" itemValue="#{institution}" itemLabel="#{institution.name}" converter="#{institutionAutoCompleteConverter}" 
                                emptyMessage="No results" multiple="true"
                                forceSelection="true" showDelay="500">
    <p:ajax event="itemSelect" listener="#{viewReport.onInstitutionSelect}" update="growl"/>
    <p:ajax event="itemUnselect" listener="#{viewReport.onInstitutionUnselect}" update="growl"/>
</p:autoComplete>

Java Bean code example:

Code: Select all

public void onInstitutionSelect(SelectEvent<Institution> event) {
    LOG.info("onInstitutionSelect");
    ...
}
public void onInstitutionUnselect(UnselectEvent<Institution> event) {
    LOG.info("onInstitutionUnselect");
    ...
}

Anyone running into the same issue in PrimeFaces 10? Any workaround or patches available to solve this issue? Thank you for your help in advance!

[Melloware]

I am not running into this issue but if you create me a small PrimeFaces Test reproducer I can help debug it!

See: https://github.com/primefaces/primefaces-test

[koichokor]

I'm facing the same issue i'm using primefaces 10.0.0.4 (Elite subscription) and Pandora Theme (2.0.0) .

The problem is located in the file layout.js shipped with the theme

When i remove this part of layout.js (shipped with the theme) is work as expected

Code: Select all

if(PrimeFaces.widget.AutoComplete) {
    PrimeFaces.widget.AutoComplete.prototype.setupMultipleMode = function() {
        var $this = this;
        this.multiItemContainer = this.jq.children('ul');
        this.inputContainer = this.multiItemContainer.children('.ui-autocomplete-input-token');

        this.multiItemContainer.hover(function() {
                $(this).addClass('ui-state-hover');
            },
            function() {
                $(this).removeClass('ui-state-hover');
            }
        ).click(function() {
            $this.input.focus();
        });

        //delegate events to container
        this.input.focus(function() {
            $this.multiItemContainer.addClass('ui-state-focus');
            $this.jq.addClass('md-inputwrapper-focus');
        }).blur(function(e) {
            $this.multiItemContainer.removeClass('ui-state-focus');
            $this.jq.removeClass('md-inputwrapper-focus').addClass('md-inputwrapper-filled');
            
            setTimeout(function() {
                if($this.hinput.children().length == 0 && !$this.multiItemContainer.hasClass('ui-state-focus')) {
                    $this.jq.removeClass('md-inputwrapper-filled');
                }
            }, 150); 
        });

        var closeSelector = '> li.ui-autocomplete-token > .ui-autocomplete-token-icon';
        this.multiItemContainer.off('click', closeSelector).on('click', closeSelector, null, function(event) {
            if($this.multiItemContainer.children('li.ui-autocomplete-token').length === $this.cfg.selectLimit) {
                if(PrimeFaces.isIE(8)) {
                    $this.input.val('');
                }
                $this.input.css('display', 'inline');
                $this.enableDropdown();
            }
            $this.removeItem(event, $(this).parent());
        });
    };
};

[Melloware]

Is your Pandora theme updated for PFX ? They released all new versions for PF 10 of the premium themes.

[koichokor]

Hello,

I'm using the last version 2.0.0 , assuming is for PFX.

Regards

[christophs78]

Please open a issue / topic in Pandora-forum: viewforum.php?f=134
ltong - which theme do you use?