Tearsheet: Element focussed twice when using stacked tearsheets

[mconway-ns1]

Package

Carbon for IBM Products

Description

Expected : selectorPrimaryFocus to be focussed and not blurred
Actual: selectorPrimaryFocus is focused and then focussed again, causing the onBlur to fire with validation

The problem seems to be in TearsheetShell. The handleStackChange.claimFocus and useEffect both focus the element c

Component(s) impacted

https://github.com/carbon-design-system/ibm-products/blob/main/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

@carbon/[email protected]

Suggested Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Product/offering

NS1

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/github-1qjirj?file=src%2FExample%2FExample.jsx

Steps to reproduce the issue (if applicable)

see example in stackblitz

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[makafsal]

@mconway-ns1 I've tried reproducing the issue after downloading the Stackblitz example you provided, but I can't reproduce it locally.
How did you find this issue in the first place, were you able to reproduce this issue locally?

In Stackblits:

Screen.Recording.2024-11-25.at.6.04.15.PM.mov

In local (downloaded from Stackblits):

Screen.Recording.2024-11-25.at.6.06.04.PM.mov

[mconway-ns1]

@makafsal you will see the onblur fire when opening the second stacked tearsheet

Screen.Recording.2024-11-25.at.14.48.37.mov

[elycheea]

@mconway-ns1 came to our office hours today and shared some investigation on the issue — seems difficult to address without a larger refactor to the TearsheetShell, which uses useEffect pretty liberally.