Focus remains on the first Tearsheet of a Tearsheet stack

[akimptonibm]

Package

Carbon for IBM Products

Description

When using a tearsheet stack, the focus (and selectorPrimaryFocus prop) only works on the first Tearsheet of the stack. Upon opening the 2nd tearsheet, the focus will remain on the 1st Tearsheet.

The problem can be seen in the storybook using Stacking Tearsheets, difference sizes: the first Tearsheet has the appropriate focus, but does not relinquish the focus when the 2nd Tearsheet of the stack is opened or respect the selectorPrimaryFocus of the 2nd tearsheet (see screenshot, where the focus is still behind on the first Tearsheet)

Component(s) impacted

Tearsheet, Stacking tearsheet

Browser

Chrome, Firefox

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

2.43.1

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Product/offering

IBM QRadar Suite

CodeSandbox or Stackblitz example

https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-tearsheet--stacked-mixed-sizes&globals=viewport:basic

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

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

[elycheea]

@akimptonibm Can you verify if this is still an issue for you? I’m no longer able to replicate this in our latest (currently v2.45.0-rc.1). https://carbon-for-ibm-products.netlify.app/?path=/story/ibm-products-components-tearsheet--stacked-mixed-sizes&globals=viewport:basic

[akimptonibm]

@elycheea The storybook seems to behave somewhat better, but I am still seeing the issue when we use v2.45.0-rc.1 in our code.

I've created a sandbox to try to illustrate the issue https://codesandbox.io/p/devbox/hopeful-benz-s4wrtf?file=%2Fsrc%2FExample%2FExample.jsx

The first Tearsheet has the expected focus, however second Tearsheet does not.

[davidmenendez]

@akimptonibm i see on the codesandbox you provided that this bug is in fact happening. can you do me a favor and try updating to the latest version of @carbon/react (1.63.1) and @carbon/ibm-products (2.46.0)? as you can see on this fork of your sandbox, everything is the same except on the latest versions of these packages, that focusing works as intended.

[akimptonibm]

@davidmenendez I tried the latest @carbon/ibm-products@2.47.0-rc.0 in my application and it does indeed seem resolved.

[davidmenendez]

good to hear! will be closing this as complete.