Problem with "hideOnOutsideClick"

[koichokor]

When using blocks with javascript interaction like "Narrow Sidebar with Titles" when clicking on menu-item that open sub-menu like the "Reports" button in the showcase , to close the submenu we need to click again on the "Reports" button , the "Reports" button have for data-pb-styleclass

Code: Select all

data-pb-styleclass="{ selector: '@next', toggleClass: 'hidden', hideOnOutsideClick: true }"

what is the purpose of the attribute "hideOnOutsideClick" ?

should it manage this kind of interaction : if a sub-menu is open if I click outside the sub-menu (somewhere on the page) then the sub-menu should be closed automatically (css class to hidden). if yes then there is a bug.

the showcase on the site of primefaces as well as the purchased version (launched with maven) has the same anomaly.

[mert.sincan]

Hi,

Thanks a lot for your report! Could you please make the following change on 'bindDocumentListener' method;

Code: Select all

      bindDocumentListener: function() {.   // Line 145
                if (!this.documentListener) {
                    var $this = this;
    
                    this.documentListener = function(event) {
                        if (!el.isSameNode(event.target) && !el.contains(event.target) && !$this.target.contains(event.target)) {
                            $this.leave();
                        }
                    };
    
                    el.ownerDocument.addEventListener('click', this.documentListener);
                }
            },

Best Regards,

[jacobo21]

Happened the same this for me, the code was provided when Copy is not the same as the one implemented, I just went to my primeblocks local project and copied the first line of that navbar, I'm using "Dim Sidebar with Topbar" Layout so went to the code, copied the first line of the sidebar and pasted it on my code and worked

local project (working)
<div id="app-sidebar-2" class="bg-bluegray-800 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-1 select-none" style="width:280px">

code provided on copy area (not working)
<div id="app-sidebar-2" class="bg-bluegray-800 h-screen hidden lg:block flex-shrink-0 fixed lg:sticky left-0 top-0 z-1 select-none" style="width:280px">

Hope its usefull for you guys!