[Bug]: Tag components use query selector with id value without protection

[Kilian-Collender]

Package

@carbon/react

Browser

Chrome

Package version

v1.58.0

React version

v18.2.0

Description

The following PR #16437 introduces the use of a querySelector call in the tag components which uses the id directly. If the id value contains anything that isn't a valid query then it breaks. It should use a ref to access the instance of the Tag DOM node.

Also the helper function isEllipsisActive accesses a element prop directly without validation and this causes an error if the element isn't a valid DOM node.

Reproduction/example

https://stackblitz.com/edit/github-ejg4ae?file=src%2FApp.jsx

Steps to reproduce

open browser console and see errors

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