ContextMenu: cannot be conditionally toggled with ajax

[NicolaIsotta]

Describe the bug

If a context menu renderd value evaluates to false, it shouldn't be displayed even if it was displayed before.

Reproducer

<h:form>
    <p:commandButton value="Toggle context menu" action="#{testView.toggleContextMenu()}" update="@form" />

    <p:outputLabel id="text" value="Context menu enabled: #{testView.enableContextMenu}"/>

    <p:contextMenu id="contextMenu2" for="text" rendered="#{testView.enableContextMenu}">
        <p:menuitem value="Homepage" url="https://www.primefaces.org" icon="pi pi-home"/>
    </p:contextMenu>
</h:form>

@Data
@Named
@ViewScoped
public class TestView implements Serializable {

    private boolean enableContextMenu;

    @PostConstruct  
    public void init() {
        enableContextMenu = true;
    }

    public void toggleContextMenu() {
        enableContextMenu = !enableContextMenu;
    }

}

To reproduce: open the page, press the button and right click the text: the context menu appears even if it shouldn't.

Expected behavior

if rendered evaluates to false, context menu shouldn't be displayed

PrimeFaces edition

Community

PrimeFaces version

12.0.0

Theme

No response

JSF implementation

Mojarra

JSF version

2.3.19

Java version

jdk-11.0.13

Browser(s)

No response

[NicolaIsotta]

If update="@form" is replaced by ajax="false", the behavior is correct.
Replacing update="@form" with update="contextMenu2" instead does not fix the issue.

[jepsar]

ajax="false" will re-initialize all Javascript objects as you do a full reload of the page. update="contextMenu2" is not valid, see https://stackoverflow.com/questions/14790014/ajax-update-render-does-not-work-on-a-component-which-has-rendered-attribute, but if you would update a wrapper, the result will probably be the same.

[melloware]

I think I know the issue. Let me try something.

[melloware]

Reproducer:
pf-9863.zip

OK so the issue is because when its created its registering contextMenu events on the target. When it gets updated and rendered="false" there is nothing removing that $(document).contextMenu event so it still subscribed in the DOM.

So I have added a destroy method but when the update is applied and its no longer rendered I thought the destroy widget method would be called to cleanup these listeners but its not being called.

[melloware]

@NicolaIsotta working workaround for you!
pf-9863.zip

if (PrimeFaces.widget.ContextMenu) {

    PrimeFaces.widget.ContextMenu.prototype._cleanup = function() {
        if (this.cfg.target === undefined) {
            var event = 'contextmenu.' + this.id + '_contextmenu';
            $(document).off(event);
            if (PrimeFaces.env.isTouchable(this.cfg)) {
                $(document).swipe().destroy();
            }
        }
        else {
            var event = this.cfg.event + '.' + this.id + '_contextmenu';
            $(document).off(event, this.jqTargetId);
            if (PrimeFaces.env.isTouchable(this.cfg)) {
                this.jqTarget.swipe().destroy();
            }
        }
    }
}

<p:commandButton 
value="Toggle context menu" 
action="#{testView.toggleContextMenu()}" 
update="@form" 
onstart="PF('cm')._cleanup();" />

[melloware]

Because this is a special case and it can't tell the widget is being updated in 13.0.0 you will just have to call onstart="PF('cm').destroy();" to destroy the widget before the AJAX request is sent and when it responds it will rebuild the widget based on the rendered flag.