Offcanvas outside focus

[fsiedler1]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I created a offcanvas bootstrap dialog and integrated a telerik filterable dropdownlist. I realized, that any html element, which is outside of the canvas dialog is not able to be focused. The telerik filterable dropdownlist creates the selection with filter outside of the offcanvas. When the dropdownlist is clicked, the focus is set the the filter outside and is immediately closed by bootstrap, because the bootstrap offcanvas do not allow the focus.

I also created a modal dialog, where you can set the data-bs-focus="false". With this configuration, it´s possible to open the dropdownlist.

I need a data-bs-focus also for the offcanvas dialog, or any workaround.

Reduced test cases

I created a REPL, where the behvaiour can be reproduced: https://blazorrepl.telerik.com/mRPPFTYh25GOskeZ46

Edit by maintainer: Same version with v5.3.2: https://blazorrepl.telerik.com/QdllvzYW01DHlNND09

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.1.3

[julien-deramond]

Thanks for reporting this issue @fsiedler1
Before starting to analyze it, I can see that the repro uses v5.1.3. Is it also true for the latest Bootstrap version?

[fsiedler1]

@julien-deramond I updated the REPL to the current version v5.3.2. It´s the same behaviour.
https://blazorrepl.telerik.com/QdllvzYW01DHlNND09

[fnzr]

Adding to the issue, this problem happens with pure bootstrap too.

If you have a popover with custom content inside a offcanvas element, the popover content can't be focused and it's useless.

Here's a reproduction CodePen showing the issue. Open the offcanvas, then open the popover content. The input is unfocusable.

https://codepen.io/fnzr/pen/vYMmXWw

[tyrone-gallardo-oobnow]

I am getting a similar issue as well. In my case. I use angular material's mat-select with an <input> embedded inside of it like so:

<mat-select [formControl]="control"> <input matInput formControlName="filter" type="text"> <mat-option *ngFor="let op of (filteredOptions$ | async)" [value]="op?.id"> {{op.name}} </mat-option> </mat-select>

The mat-select component opens fine, but when I click on the embedded input element, it focuses on the [X] button of the offcanvas, similar to @fsiedler1 's reproduction

Bootstrap v.5.2.0

[betterunite]

Same issue here, using CKEditor on off-canvas. Can't focus when trying to add a link to the content. It pops up a modal for url editing but can't focus on the url textbox, the focus just goes to the off-canvas instead.

[xebamart]

I'm having the same problem with Syncfusion's SfDropDownList component.

[Sunchock]

Same issue here with a pivotgrid inside an offcanvas. When I tried to focus on the input textbot for a filter, the focus goes to the close button of the offcanvas.
I tried to add data-bs-focus="false" to the close button but it did'nt work in my case

[arufonsekun]

I was having the same issue on my side. As workaround I've created an offcanvas passing the config { scroll: true } like:

const offcanvas = new bootstrap.Offcanvas(domEl, { scroll: true});
offcanvas.show();

This ☝🏻 prevented this line from executing, and solved the issue with focus.
(Commenting if anyone still struggling with that), best regards.

[Sunchock]

I was having the same issue on my side. As workaround I've created an offcanvas passing the config { scroll: true } like:

const offcanvas = new bootstrap.Offcanvas(domEl, { scroll: true});
offcanvas.show();

This ☝🏻 prevented this line from executing, and solved the issue with focus. (Commenting if anyone still struggling with that), best regards.

Not working for me, thanks for sharing anyway

[mduffey]

I was having the same issue on my side. As workaround I've created an offcanvas passing the config { scroll: true } like:

const offcanvas = new bootstrap.Offcanvas(domEl, { scroll: true});
offcanvas.show();

This ☝🏻 prevented this line from executing, and solved the issue with focus. (Commenting if anyone still struggling with that), best regards.

That did help for me. Great find, and I appreciate it.

That said, I'd like to promote this issue as a concern as well. toggling focus for things like modals would be very helpful.

[krystofbe]

I encountered a similar issue with Select2 where the search input inside the dropdown was not accessible due to the focus trap in Bootstrap’s Modal and Offcanvas components. To resolve this, I applied the following hack to disable the focus trap temporarily:

bootstrap.Modal.prototype._initializeFocusTrap = function () {
  return { activate: function () {}, deactivate: function () {} };
};
bootstrap.Offcanvas.prototype._initializeFocusTrap = function () {
  return { activate: function () {}, deactivate: function () {} };
};

This workaround ensures that the Select2 search input field is accessible, but it comes with trade-offs as it completely disables the focus trap for modals and offcanvas. A proper fix in Bootstrap would be greatly appreciated to handle these use cases gracefully.

Looking forward to an update or a recommended approach to resolve this without resorting to such hacks!