Primefaces: autoComplete: Serenity theme layout.js bug on removing item

[l-tong]

Describe the defect
Remove an item from the p:autoComplete multiple select is not working. It throws an error:

components.js.xhtml?ln=primefaces&v=10.0.0&e=10.0.0:3 Uncaught TypeError: c.attr is not a function
    at c.removeItem (components.js.xhtml?ln=primefaces&v=10.0.0&e=10.0.0:3)
    at HTMLSpanElement.<anonymous> (layout.js.xhtml?ln=serenity-layout:818)
    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)

I have to manually change the serenity-layout/layout.js with temporary fix shown in the codes below.

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());  //<---- Original Serenity code which cause the error
            $this.removeItem($(this).parent());  //<-- temporary fix
        });
    };
};

Environment:

• PF Version: 10.0.0
• JSF + version: Mojarra 2.3.9
• Affected browsers: ALL

To Reproduce

1. Download serenity-2.1.1.zip from PrimeStore and add Serenity theme to project
2. Create autoComplete like below example

Example XHTML

<p:autoComplete id="organization-list" value="#{orgView.organizations}" completeMethod="#{orgView.onOrgSuggestionsFired}"
                             var="institution" itemValue="#{institution}" itemLabel="#{institution.granteeName}" converter="#{orgAutoCompleteConverter}" 
                             emptyMessage="No results" multiple="true" forceSelection="true">
    <p:ajax event="itemSelect" listener="#{orgView.onOrgSelect}" update="growl"/>
    <p:ajax event="itemUnselect" listener="#{orgView.onOrgUnselect}" update="growl"/>
</p:autoComplete>

Example Bean

@Named
@ViewScoped
public class OrgView implements Serializable {
    ...
    public void onOrgSelect(SelectEvent<Institution> event) {
        organizations.add(event.getObject());
    }
    public void onInstitutionUnselect(UnselectEvent<Institution> event) {
        organizations.remove(event.getObject());
    }
}

[melloware]

According the WIKI Serenity has not been updated for PF10 yet: https://github.com/primefaces/primefaces/wiki/Updates-Of-Premium-Templates-For-PrimeFaces-X

[l-tong]

Is there an estimate on when Serenity will be updated? Thanks!

[melloware]

I don't work for PrimeTek but they have been updating the Discord channel with updates: https://discord.com/channels/787967399105134612/787967713137524737

[sqores]

I updated Serenity with new material theme which one is developed from scratch. Please wait a week for release. We are working on some missing features.

[sqores]

Also for monkeypatch for your issue please delete autocomplete code block in layout.js