[Bug]: FileUploaderItem not working in ShadowDOM

[wfdcfs]

Package

@carbon/react

Browser

Chrome, Safari, Firefox

Package version

1.60.1

React version

18.3.1

Description

We use the shadowDOM.
When I update beyond 1.39.0 (1.39.0 works for us), I have an issue with the FileUploaderItem component - this component works fine if not using shadowDOM.
The issue is with line https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/FileUploader/FileUploaderItem.tsx#L111

const element = document.querySelector(`[title="${name}"]`);

In the shadowDOM, element returns as null and later the Carbon component tries to do setIsEllipsisApplied(element.offsetWidth < element.scrollWidth); - this is where it bombs out with the error:

TypeError: Cannot read properties of null (reading 'offsetWidth')
    at isEllipsisActive (FileUploaderItem.js:72:34)
    at eval (FileUploaderItem.js:77:5)
    at commitHookEffectListMount (react-dom.development.js:23184:26)
    at commitLayoutEffectOnFiber (react-dom.development.js:23302:17)
    at commitLayoutMountEffects_complete (react-dom.development.js:24722:9)
    at commitLayoutEffects_begin (react-dom.development.js:24708:7)
    at commitLayoutEffects_begin (react-dom.development.js:24690:11)
    at commitLayoutEffects (react-dom.development.js:24646:3)
    at commitRootImpl (react-dom.development.js:26857:5)
    at commitRoot (react-dom.development.js:26716:5)

Reproduction/example

https://stackblitz.com/edit/react-ts-mss5gp?file=index.tsx

Steps to reproduce

Just open the stackblitz link and you will see the error message.

Suggested Severity

Severity 2 = User cannot complete task, and/or no workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

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

[s100]

Seeing a similar issue while testing using Mocha and JSDOM. You should be using refs for this purpose, not document.querySelector.

[s100]

We have an extremely hacky workaround:

const originalQuerySelector = document.querySelector
document.querySelector = function (query) {
  if (/^\[title=".*"]$/.test(query)) {
    return {
      offsetWidth: 0,
      scrollWidth: 0
    }
  }
  return originalQuerySelector.apply(this, arguments)
}