It sounds like you are encountering an issue where you are unable to focus on an input field inside a Toast component when a Modal is displayed on the screen. This is a common problem that occurs when there are multiple layers of UI components on the screen, and the Modal is taking focus away from the Toast.

One solution to this problem is to use a higher z-index value for the Toast component, which will ensure that it is displayed on top of the Modal. Additionally, you can add a tabindex attribute to the input field inside the Toast, which will allow users to focus on the input field using the keyboard.

No, I already tried setting a higher z-index for the Toast, but this doesn't work, you can try it yourself. Also tabindex has no effect. But thanks for trying to help!

look at this:
https://codepen.io/gpl4all/pen/MWPVLQw
i moved toast inside modal, and input can get focus

your problem is caused by overlay layer of modal is on top of everything else on screen which is your toast.

another thought, i usually use toast to display msg only, not for taking any input, for taking input from user use another modal, look at the doc on multiple modal and how to switch back and forth between modals.

Thank you for helping, but unfortunately this isn't the solution I am looking for. I need the toast with the input as a search box. This also makes it not really possible to put it into every modal that can possibly come up.

Also, it doesn't seem that the modal has an overlay layer, since clicking buttons in the toast works fine.

Hey there, one possible workaround could be manually giving the input field focus when the Toast is shown, like so:
var toastEl = document.querySelector('.toast');
var toast = new bootstrap.Toast(toastEl, { autohide: false });
toast.show();

toastEl.addEventListener('shown.bs.toast', function () {
var inputEl = toastEl.querySelector('input');
inputEl.focus();
});
This will ensure that the input field receives focus as soon as the Toast is displayed, even when a modal is active. However, once the input field loses focus (for example, if a user clicks elsewhere), it might not be possible to focus it again until the modal is closed. Any thoughts on this ?

However, this won't work when the toast is shown before the modal is opened. Also, focusing the input inside the toast via JS doesn't even work when the modal is opened.

Any thoughts on this issue from the maintainers? I think this is definitely a bug in bootstrap that could be fixed.

I'm trying a first quick analysis here.

IMO this behavior is linked to the focus trap system in place for modals. When a modal is displayed, when navigating with your keyboard, you can't focus on anything else on the page until you close this modal. We could argue that the focus trap could allow exceptions, but I'd say that if you would use a <dialog> instead of a modal from Bootstrap, you would have the same behavior here, and you probably wouldn't be able to change it because it's handled by browsers directly.

Based on the CodePen, I'd also say that we shouldn't even be able to click on the toast buttons while the modal is displayed.

Thoughts @twbs/js-review?
@patrickhlauke Do you have specific elements on the a11y side to add or precise here?

How is it possible to make an exception to all modals for the toast? I think both cases should be possible. The default could be that the focus trap is enabled.

Also, it doesn't seem that the modal has an overlay layer, since clicking buttons in the toast works fine.

Hi there !

Regarding this point, I think buttons on toasts should not be working when the modal is shown, IMO the current behaviour between toast input not working when the modal is shown and buttons that work, is somehow inconsistent.

I think there should be a way to prevent modal's focus trap in certain scenarios. I am building a typeahead that goes full screen when in small devices (For better user experience). For small devices, i move the typeahead inside the body element and control it's positioning so as to make it full screen, i then programmatically put focus on the input element. This works in all cases except for the case when it's inside a modal. How can we possibly turn off focus trapping in a modal?

As a workaround I call this before the modals are shown:
bootstrap.Modal.getInstance(event.target)._focustrap.deactivate();
Would be nice if there is some kind of global configuration for this...

I work in this issue the last 3 weeks.
I found a solution by changing the style of modal dialog from position relative to position fixed