[Reactive Sidebar with Overlay] Pressing the ESC button closes the sidebar but leaves the overlay visible
Forge component by José Pedro Proença
Application Type
Reactive

Hello,

When you press the escape button while the sidebar is open there is some unexpected behavior.

In case you made the overlay not clickable, the sidebar closes but the overlay remains visible and cannot be removed.
In case you made the overlay clickable, the sidebar closes but the overlay remains visible. When you then click on the overlay it disappears but the sidebar re-opens.

Is that something that you could look into?

Regards,
Alfio Esposito

Solution

Hi Alfio,

The new update is live :) you should be able to achieve the desired behavior after updating the component on your app.


Thank you very much for your feedback!

Hi José,

Always happy to give feedback :-). Thanks for looking into the issue.

Regards,
Alfio

Hi Alfio Esposito,


We are working on a solution to work properly with ESC key.


In the next version release, we will fix it.


Cheers,

Luís

Solution

Hi Alfio,

The new update is live :) you should be able to achieve the desired behavior after updating the component on your app.


Thank you very much for your feedback!

Hi José,

Always happy to give feedback :-). Thanks for looking into the issue.

Regards,
Alfio

It's still not working as expected. When you use the demo and open the second Sidebar and then press ESC you close the first Sidebar but not the second. Pressing ESC again doesn't do anything. I would expect that when I press ESC the first time I close the second Sidebar and when I press ESC again I close the first Sidebar. 

Hi Vincent Koning,


The ESC button works with the Sidebar on focus, so for having just one sidebar open there is no issue. 

Outsystems toggles the sidebar when you changed the extended class input, for example adding the class sidebar-l, because of this we need to toggle the sidebar on the back again which in turn steals the focus of the sidebar on the front.

When you choose the option for enabling multiple sidebars, the ESC key will close the active sidebar.
So, when you have more than one sidebar you need to click on the current sidebar to close all.

We tried to put the Focus on the second sidebar but it doesn't work for now. 

We talked with Outsystems to find a better solution.


Cheers,

Luís

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.