Problem with "hideOnOutsideClick"

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
koichokor
Posts: 4
Joined: 01 Jan 2016, 23:01

23 Dec 2021, 18:51

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
Posts: 5281
Joined: 29 Jun 2013, 12:38

05 Jan 2022, 09:48

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
Posts: 1
Joined: 06 Jul 2023, 19:47

28 Jul 2023, 23:10

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!

Post Reply

Return to “PrimeBlocks for PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest