Tearsheet auto focusing on close button, and seems selectorPrimaryFocus is not working

[David-Yuen]

Package

Carbon for IBM Products

Description

In ibm-products v2.37.0, when opening the Tearsheet, it is automatically focusing on the top-right x close button for some reason.. The focus and tooltip is distracting every time it opens, this wasnt happening before when using carbon v10 versions..

Would like to turn it off.

Another problem is, seems like selectorPrimaryFocus is not working. I coudln't figure out how to turn off auto-focusing when opening Tearsheet, so i was trying to alternatively focus on another component, but it won't do anything. I saw this prop in the ibm-products storybook: https://carbon-for-ibm-products.netlify.app/?path=/docs/ibm-products-components-tearsheet--docs

I had just started using this in the ComposedModal component from carbon react library and it works fine there, but it doesnt seem to work in Tearsheet for ibm-products.

I roughly have something like this:

        <Tearsheet
          hasCloseIcon
          closeIconDescription={..}
          onClose={..}
          selectorPrimaryFocus="#dashboard-settings__close-button"
          actions={[
            {
              id: "dashboard-settings__close-button",
              kind: "secondary",
              label: "..",
              onClick: ..,
            },
          ]}
        >

The close props are filled out, and as you can see, i have assigned selectorPrimaryFocus to a element on the Tearsheet. The close button in the footer is assigned with the proper id attribute, but when opening the Tearsheet, it is still focusing on the x close button.

Component(s) impacted

Tearsheet

Browser

Chrome

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

v2.37.0

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Product/offering

IBM Cloud Data Replication

CodeSandbox or Stackblitz example

N/A

Steps to reproduce the issue (if applicable)

Copied from description above.. i roughly have this:

        <Tearsheet
          hasCloseIcon
          closeIconDescription={..}
          onClose={..}
          selectorPrimaryFocus="#dashboard-settings__close-button"
          actions={[
            {
              id: "dashboard-settings__close-button",
              kind: "secondary",
              label: "..",
              onClick: ..,
            },
          ]}
        >

And it's auto-focusing on the x close button when opening the Tearsheet (every time).

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

[matthewgallo]

Hey @David-Yuen, thanks for the detailed issue! This sounds like a duplicate of https://github.com/carbon-design-system/ibm-products/issues/5152, which was resolved ~2 weeks ago and included in 2.40.0.

[David-Yuen]

i am currently using 2.37.0 and cannot upgrade newer because of this issue: https://github.com/carbon-design-system/ibm-products/issues/5381

[matthewgallo]

I just opened a PR for that issue, https://github.com/carbon-design-system/ibm-products/pull/5391, once merged there will be a canary release that includes the fixes for you to try out.

[David-Yuen]

thanks, will test when available

[matthewgallo]

This should be fixed and available in latest release.

[wkeese]

It isn't fixed though. And #5391 is unrelated to tearsheets.

TearsheetShell.tsx has this very strange code which seems obviously wrong:

    useEffect(() => {
      if (open && position !== depth) {
        setTimeout(() => {
          firstElement?.focus();
        }, 0);
      }
    }, [position, depth, firstElement, open]);

The first problem is that it's not accounting for selectorPrimaryFocus.

The second problem is that the position !== depth condition means that in the case of nested tearsheets, it's operating on the wrong tearsheet, i.e. the original tearsheet rather than the nested one that's currently active.

The third problem is: Does that code have any purpose? There's already a bunch of code in TearsheetShell.tsx dealing with focus, in addition to the code in ComposedModal.tsx.