fix(tag): use refs to handle component access #16571
Conversation
When using the querySelector it is easily broken if the id has reserved characters. Also the isEllipsisActive helper had no protection for a non element.
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for v11-carbon-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Hey real quick before we merge this I'm going to correct the deprecation notices |
|
Thanks for that! I added a |
| return ( | ||
| <ComponentTag className={tagClasses} id={tagId} {...other}> | ||
| <ComponentTag ref={tagRef} className={tagClasses} id={tagId} {...other}> |
There was a problem hiding this comment.
should this not be ref too now?
There was a problem hiding this comment.
Actually we can remove the ref from this one. The filter prop should be replace with the new variant Dissmisible Tag so we don't have to add the new functionality to the old filter tag.
There was a problem hiding this comment.
but isn't the Dismissible Tag experimental? so you still need it there until it is fully deprecated
There was a problem hiding this comment.
I see your point. It is something I will take to the team to talk about it. Since we have implemented in the Dissmisible Tag it would be quick to implement on the old filter prop.
But for now the spec we have is only in the new Intereactive Tag.
…6571) * fix(tag): use refs to handle component access When using the querySelector it is easily broken if the id has reserved characters. Also the isEllipsisActive helper had no protection for a non element. * fix(tag): cast BaseComponent type * fix(tag): improve deprecation notices * fix: added forwardRef to Tag to grab ref in variants * fix: removed console log * fix: fixed spelling and remove ref from old filter * fix: updated snapshots * fix: fixed onMouseEnter error on console * fix: fixed TS error --------- Co-authored-by: Taylor Jones <[email protected]> Co-authored-by: guidari <[email protected]>
Closes #16570
When using the querySelector it is easily broken if the id has reserved characters also the isEllipsisActive helper had no protection for a non element. So now using refs to access the DOM element and the helper has been extracted for reuse and includes extra protection.
Changelog
New
Changed
Removed
Testing / Reviewing
N.B. There was no testing in place around the recent changes that were added, it is strongly advised that we need tests here both unit and E2E.