fix: anchor name in popover and tooltip #194
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR fixes the anchor name handling in Popover and Tooltip components by ensuring that auto-generated IDs are properly escaped for CSS selector usage. When no explicit ID is provided, the components now use CSS.escape() to sanitize the uniqueId before using it as popupId, preventing potential issues with special characters in CSS selectors.
Key Changes:
- Applied
CSS.escape()to auto-generated IDs in both Tooltip and Popover components to ensure valid CSS anchor names
Reviewed Changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/react/src/components/Tooltip.tsx | Added CSS.escape() to sanitize auto-generated uniqueId for popupId |
| packages/react/src/components/Popover.tsx | Added CSS.escape() to sanitize auto-generated uniqueId for popupId |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| const uniqueId = useId(); | ||
| const popupId = id ?? uniqueId; | ||
| const popupId = id ?? uniqueId.replace(/^:([^:]+):$/g, '«$1»'); |
There was a problem hiding this comment.
The character transformation logic is duplicated across Tooltip and Popover components. Consider extracting this into a shared utility function (e.g., sanitizeId or formatAnchorId) to maintain consistency and make future updates easier.
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
No description provided.