Unable to focus the input in the popup, and the popup closes immediately when placed inside the Offcanvas

[UdhayaKumarDuraisamy]

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 have a custom dropdown that I rendered inside the Bootstrap Offcanvas. The dropdown's popup, which is rendered as a child to the body element outside of the Offcanvas, contains an input rendered within the popup element. When trying to open the popup and focus on the input, it immediately closes the popup.

Upon further investigation, it was observed that when the Offcanvas is opened, it enforces focus on itself if an element outside of the Offcanvas gains focus.

When searching on the web, I found that the same issue occurred with Bootstrap modal, and below I have shared it for reference.
#19971
sweetalert2/sweetalert2#374

Reduced test cases

I'm using "https://getbootstrap.com/docs/5.3/components/offcanvas/".

BlazorApp1-main.zip

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

Windows, macOS

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

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

5.3

[julien-deramond]

Hi @UdhayaKumarDuraisamy
Thanks for reporting an issue in this repository.
I can see that you provided a reduced test case in a .zip file. Could you please try to upload its content in CodePen, StackBlitz or any other online tool? For security reasons, won't open the .zip file on my machine :)

[xebamart]

Hello,

GitHub link attached.

https://github.com/xebamart/BlazorApp1