How to prevent close action when clicking specific target in React Sidebar component?
The following steps used to prevent the Sidebar from close when clicking specific target with closeOnDocumentClick property enabled.
Steps 1 : Implement the Sidebar component using our Getting Started documentation.
Step 2 : To achieve the desired functionality, bind the
close event to the Sidebar component.
Step 3 : In the close event handler, check if
the event target contains a specific or expected target value. If it does, prevent the close action by setting args.cancel to
true.
[App.js]
|
function OnClose(args)
{ if (args.event?.target.classList.contains('e-list-item')) { args.cancel = true; } } return ( <div className="control-section"> <div id="wrapper"> {/* Initializing the Sidebar component */} <SidebarComponent .... close={OnClose} > ..... </SidebarComponent> </div> </div> );
|
Sample : Sidebar-DropdownList-CloseOnDocumentClick (forked) - StackBlitz
See Also :
