Closed wfdcfs closed 5 days ago
Seeing a similar issue while testing using Mocha and JSDOM. You should be using refs for this purpose, not document.querySelector
.
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)
}
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 theFileUploaderItem
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#L111In the shadowDOM,
element
returns asnull
and later the Carbon component tries to dosetIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
- this is where it bombs out with the error: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