SelectCheckboxMenu: emptyLabel not considered as overlay-target and opens behind dialog

[arnis87]

Describe the bug

Dialog bindEvents checks for whether mousedown event target was primefaces-overlay-target and if not moves to top. This causes issues with clicks on selectCheckboxMenu emptyLabel which opens the menu/dropdown but dialog moves on top of it. When clicking on dropdown arrow or actual data label it works fine.

SelectCheckboxMenu emptyLabel fails this check on line 379:

primefaces/primefaces/src/main/resources/META-INF/resources/primefaces/dialog/dialog.js

Lines 377 to 382 in 4e4430b

	//Move dialog to top if target is not a trigger for a PrimeFaces overlay
	this.jq.on("mousedown", function(e) {
	if(!$(e.target).data('primefaces-overlay-target')) {
	$this.moveToTop();
	}
	});

Reproducer

Place selectCheckboxMenu inside popup and click on emptyLabel instead of dropdown arrow.
Menu opens but container dialog moves on top right after

Expected behavior

Menu should open on top of the dialog

PrimeFaces edition

Elite

PrimeFaces version

12.0.3

Theme

No response

JSF implementation

Mojarra

JSF version

2.3

Java version

8

Browser(s)

No response

[melloware]

Please provide an executable example using the PrimeFaces Test project. It is the only way developers can debug your problem to help.

[arnis87]

I will give it a go when I have more time.

For now I have debugged it myself and can see that the issue is caused by the emptyLabel being rendered without every getting the data('primefaces-overlay-target') attached to it. During init it will renderLabel after the data is attached to triggers and its children.
data('primefaces-overlay-target') is attached here:

primefaces/primefaces/src/main/resources/META-INF/resources/primefaces/forms/forms.selectcheckboxmenu.js

Line 152 in 4e4430b

this.triggers.data('primefaces-overlay-target', true).find('*').data('primefaces-overlay-target', true);

renderLabel() call happens few lines down.

primefaces/primefaces/src/main/resources/META-INF/resources/primefaces/forms/forms.selectcheckboxmenu.js

Line 161 in 4e4430b

this.renderLabel();

and the emptyLabel gets constructed inside via regular html injection and no data attached

primefaces/primefaces/src/main/resources/META-INF/resources/primefaces/forms/forms.selectcheckboxmenu.js

Line 248 in 4e4430b

this.multiItemContainer.empty().append('<li class="ui-selectcheckboxmenu-emptylabel">' + (this.multiItemContainer.data('label') || '&nbsp;') + '</li>');

It is also issue when the emptyLabel has default value.

I have implemented a workaround/monkey patch which is to extend PrimeFaces.widget.SelectCheckboxMenu and its renderLabel method:

renderLabel: function () {
     this._super();
     this.triggers.data('primefaces-overlay-target', true).find('*').data('primefaces-overlay-target', true);
}

[melloware]

Thanks for the debug. Let me submit a PR.

[melloware]

Please review my PR!

[iki-hacon]

@melloware This bug also happens, if I klick on a multiple token label.
To solve this, the following monkey patch helped:

PrimeFaces.widget.SelectCheckboxMenu = PrimeFaces.widget.SelectCheckboxMenu.extend({

    renderLabel: function () {
        this._super();
        this.registerTrigger();
    },
    updateLabel: function () {
        this._super();
        this.registerTrigger();
    },
    /**
     * Mark trigger and descandants of trigger as a trigger for a primefaces overlay.
     * @private
     */
    registerTrigger: function() {
        if (!this.disabled) {
            this.triggers.data('primefaces-overlay-target', true).find('*').data('primefaces-overlay-target', true);
        }
    }

});

You might need to extend the fix to updateLabel also (or the rendering of the multiple tokens)

[melloware]

Just submitted fix.