Merge pull request #838 from gabrieljablonski/fix-query-selector

danielbarion · web-flow · commit acaa612844ea · 2022-12-08T12:17:09.000-03:00
Fix anchor element selector to support usage of `React.useId()`
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -107,7 +107,7 @@ const Tooltip = ({
   const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50)
 
   useEffect(() => {
-    const elementReference = document.querySelector(`#${anchorId}`)
+    const elementReference = document.querySelector(`[id='${anchorId}']`)
 
     if (!elementReference) {
       // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -141,7 +141,7 @@ const Tooltip = ({
   }, [anchorId, events, delayHide, delayShow])
 
   useEffect(() => {
-    const elementReference = document.querySelector(`#${anchorId}`)
+    const elementReference = document.querySelector(`[id='${anchorId}']`)
 
     computeToolTipPosition({
       place,
diff --git a/src/components/TooltipController/TooltipController.tsx b/src/components/TooltipController/TooltipController.tsx
@@ -130,7 +130,7 @@ const TooltipController = ({
       return () => {}
     }
 
-    const elementReference = document.querySelector(`#${anchorId}`)
+    const elementReference = document.querySelector(`[id='${anchorId}']`)
 
     if (!elementReference) {
       // eslint-disable-next-line @typescript-eslint/no-empty-function

Original file line number	Diff line number	Diff line change
`@@ -130,7 +130,7 @@ const TooltipController = ({`
`130`	`130`	`return () => {}`
`131`	`131`	`}`
`132`	`132`
`133`		- const elementReference = document.querySelector(`#${anchorId}`)
	`133`	+ const elementReference = document.querySelector(`[id='${anchorId}']`)
`134`	`134`
`135`	`135`	`if (!elementReference) {`
`136`	`136`	`// eslint-disable-next-line @typescript-eslint/no-empty-function`