I've been implementing a sidebar for which the behaviour should be that on clicking outside the sidebar (which is my case is around 80% width of the screen), the sidebar should close.
It seems like the client action SidebarClickOutsideToClose should do exactly this, and I'm calling it on the "initialized" event of the sidebar.
However, it has no effect.
I've tried as well playing with the "HasOverlay" attribute of the sidebar which says that when true- clicking outside will close the sidebar. But that has no effect neither.
What are my options here?
OS UI version: 2.15.0
Best,
Lorena
Hi @Lorena Sabou
Just to give you an update on this topic, we finally were able to review it, and I'm happy to say that we'll have a fix that will cover your use case in the next release (check ROU-11487 for reference in the release notes)—there is no ETA we can provide at the moment.
Given the fact the issue is located on a private method, we can't unfortunately provide a workaround.
Best Regards,GM
To enable the sidebar overlay, set the HasOverlay property on the sidebar to True.
Once enabled, clicking on the overlay will automatically close the sidebar.
I hope this resolves your issue!
AC
Hi Andre,
Unfortunately in my case it has no effect.
Attached an oml.
You were missing some logic. I did the changes on your oml and its working now.
Check Test2 screen.
For my use case I need to keep the entire layout and as much logic as possible in the wb, as this will be a reusable mobile navigation component for multiple projects. The screen implementing the wb should contain the minimum logic.
Are you able to put the logic created inside the Block?
To make this more efficient and collaborative for the community please share a sample OML where that issue can be reproduced. That way the community can take a look without investing more time in implementing the use case.
Cheers,GM
Hi Goncalo,
Attaching an oml here.
I have the sidebar as a wb because in my case it will be a reusable mobile view, but used in a web app. Therefore in the main page it's encapsulated by that boolean to show menu.
I'm using here both overlay = true and on the initialized callback from the sidebar the SidebarClickOutsideToClose.
In my project the StartsOpen in the sidebar wb is always true, and the sidebar is just rendered/not based on the visibility parameter from the implementing screen, but the behaviour is the same.
Find attached a working version for your use case.
Since you're enclosing your Sidebar on a block (I would advice to avoid this and have on a block only the content as a best practice) you don't have access to the runtime component Identifier so in order to use the APIs as expected you need to have access to it.
Hope it helps!
Many thanks!
The reason I need it to be a wb is to have a reusable mobile menu that will be shared across multiple apps, so the implementing screens need to have the least additional logic required.
With this approach the menu closes, indeed, but it closes whenever I click in/outside the menu. What I'm looking for is handling the close only on outside click. Is it possible in the scope of the web block? Having the SidebarClickOutsideToClose in the SidebarInitialized event doesn't seem to do the trick..
I understand the use case but for components that are attached/floating from the screen content like Sidebars and BottomSheets for instance, that's not a good idea and will not work because of the place in the DOM that will hit the body click event that is a more high-level framework event. So, this is not a supported use case and I would advise a different approach since I don't see a good alternative that won't cause any side effects. If I remember something I can share but remember it will be more custom code to maintain.