bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

Make it optional to hide offcanvas when resizing the window

Open Rezyan opened this issue 2 years ago • 2 comments

Prerequisites

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:

  1. The user uses an Android mobile device.
  2. The DOM has an .offcanvas with position: absolute.
  3. The .offcanvas contains an <input type="text">.
  4. The user click on the <input type="text"> to write something.
  5. The .offcanvas will be hidden because its position is not fixed. Explanation:
    • Clicking on the <input type="text"> will open the mobile virtual keyboard.
    • When opening the mobile virtual keyboard, the resize event will be triggered on the window.
    • Because of this event, the current listener will be executed.

Rezyan avatar Jan 19 '23 13:01 Rezyan

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.

yassin014 avatar Mar 16 '23 16:03 yassin014

Is this still a problem?

rdubbi avatar Jan 06 '25 18:01 rdubbi