Make it optional to hide offcanvas when resizing the window
Prerequisites
- [X] I have searched for duplicate or closed feature requests
- [X] I have read the contributing guidelines
Proposal
Hi,
When the user resizes the window, all offcanvas that are not in the fixed position are hidden because of this piece of code: https://github.com/twbs/bootstrap/blob/bada2b9a90be728da0157a6f96e4de5364035f5f/js/src/offcanvas.js#L266-L272
So I suggest to make this behavior optional, for example by creating a hideOnWindowResizing option (true by default).
Motivation and context
In some cases we don't want to hide the offcanvas on window resizing, even when the positions are absolute. In some of UI I have created, this causes problems for my users. It would be very appreciated to implement an option such this one.
Scenario example:
- The user uses an Android mobile device.
- The DOM has an
.offcanvaswithposition: absolute. - The
.offcanvascontains an<input type="text">. - The user click on the
<input type="text">to write something. - The
.offcanvaswill be hidden because its position is notfixed. Explanation:- Clicking on the
<input type="text">will open the mobile virtual keyboard. - When opening the mobile virtual keyboard, the
resizeevent will be triggered on thewindow. - Because of this event, the current listener will be executed.
- Clicking on the
EventHandler.on(window, EVENT_RESIZE, () => {
for (const element of SelectorEngine.find('[aria-modal][class*=show][class*=offcanvas-]')) {
if (getComputedStyle(element).position !== 'fixed' && element.offcanvas._hideOnWindowResizing) {
Offcanvas.getOrCreateInstance(element).hide();
}
}
});
In this updated code, I have added a check to see if the hideOnWindowResizing option is true or false before hiding the offcanvas when the window is resized. If the option is false, the offcanvas will not be hidden. I have added a new constructor option called hideOnWindowResizing which is true by default.
Is this still a problem?