The process of building custom applications and tools that interact with Microsoft SharePoint, including SharePoint Online in Microsoft 365.
BaseDialog in ListViewCommandSet does not bind with FocusTrap and causes to render Dialog and FocusTrap separately
I am developing ListViewCommandSet app, which brings up BaseDialog (as shown in multiple examples) using newest release of spfx 1.18.2. I render BaseDialog with child React component which has DialogBody as first component(works same using Panel). When rendering this, it produces some kind of FocusTrap (white box in picture) which I tried to catch and wrap my BaseDialog into, but it does not work. It causes elements to lose focus, hides underneath BaseDialog, etc.
I don't think I should try to catch it manually, everything should be wrapped into domElement correctly out of the box.
This behavior happens with any component using BaseDialog. I am aware that I should not render two Dialogs. Have anybody have idea how to fix this? Actually, It was developed few months ago and worked correctly, this bug happened few weeks ago. Maybe something in SharePoint UI changed that causes this?
Woud greatly appreciate any insights and help.
Thank you,
Dainius