Focus issue on Tearsheet with carbon Modal

[nelsonchen90]

What package(s) are you using?

• Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)
• Legacy/CDAI
• Legacy/Security

Detailed description

Describe in detail the issue you're having.

We need to open a modal on top of a tearsheet when user tries to close the tearsheet with form filled.
I am using React.portal to render both Tearsheet and Modal at the document.body.
When the Modal is open, user is seeing issue with the focus still being on the tearsheet.
And in Chrome, the focus can not be fixed unless user click away from the current html document (i.e click the address bar in the browser) and comes back to the modal - all steps documented in this codesandbox example:

https://codesandbox.io/s/still-smoke-h1900i?file=/src/App.js

Is this issue related to a specific component?

Tearsheet

What did you expect to happen? What happened instead? What would you like to
see changed?

The focus should be working properly on the Modal

What browser are you working in?

Chrome, Firefox

What version of the @carbon/ibm-products (or @carbon/ibm-cloud-cognitive)
package are you using?

Issue is found on Production running @carbon/[email protected].
But I can reproduce on @carbon/[email protected] with [email protected] and [email protected]

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Watson knowledge catalog. CPD 4.6 (Nov 2022)

Steps to reproduce the issue

Documented in the codesandbox

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/still-smoke-h1900i?file=/src/App.js

[jagathgj]

Hi @nelsonchen90, This might be an issue due to React portal. I have attempted to obtain the focus on an input inside the modal by adding selectorPrimaryFocus. However, the Tearsheet is brought back into focus once more. I have found a solution for the same from the github community. Here is the link. Kindly check this and let me know your thoughts.

facebook/react#12454

[nelsonchen90]

@jagathgj
Thanks for pointing that solution. However, that doesn't resolve my issue, you can see it in the original codesanbox or here: https://codesandbox.io/s/still-smoke-h1900i?file=/src/App.js

[jagathgj]

Hi @nelsonchen90, I have investigated the issue. It might be a problem with the functionalities in Tearsheet. Tearsheet is claiming the focus back due to function written for 'stacked' tearsheet. If we move Modal inside the tearsheet, it will work as expected. But again this focus trap issue needs to be taken care. I will let you know once fixing it.

[jagathgj]

Hi @nelsonchen90, It was found out that the Carbon 10 Modal doesn't support stacked Modals. Even though the Tearsheet is based on basic Modal component, the functions written for Tearsheetshell won't work on Modals and it would be hard to achieve the expected result. This issue should be taken care in Carbon 11.

@elycheea FYI

[stale]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[elycheea]

Closing this issue. #2452 is where we are tracking the nested modal/tearsheet issues further. @davidmenendez has opened PR and discussion in the Carbon repo as well.