TearsheetShell focus code exceptions and excessive focuses

[wkeese]

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.

Every time I open a Tearsheet, every Tearsheet on the page tries to focus. This is because in handleStackChange.checkFocus(), position === depth === 0 for every tearsheet.

May be happening especially when using stacked tearsheets instead of nested tearsheets (see #2452).

To make matters worse, handleStackChange.claimFocus() may get an exception because there’s no element matching selectorPrimaryFocus. This happens for Tearsheets that defer rendering until they are opened:

<Tearsheet selectorPrimaryFocus="[role=tab]">
   { open && <TabList> … }
</Tearsheet>

Is this issue related to a specific component?

Yes, Tearsheet

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

Lots of exceptions in the console.

What browser are you working in?

Chrome

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

2.18.0

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

IKC (nee Waston Knowledge Catalog)

Steps to reproduce the issue

Should be able to see the behavior from https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-tearsheet-tearsheet--stacked by setting a breakpoint in TearsheetShell.js. But the exception won't happen unless you have markup like above:

<Tearsheet selectorPrimaryFocus="[role=tab]">
   { open && <TabList> … }
</Tearsheet>

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products/SidePanel