refactor(paths): replace LemonDropdown with Popover in PathNodeCard#51996
Draft
Conversation
Member
Author
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
Switch from LemonDropdown to Popover for path node cards so the popover stays open when hovering over it, allowing users to interact with clickable elements like continuing/drop-off person counts. Also adds data-attr attributes to the card and its popover for analytics tracking.
pauldambra
force-pushed
the
03-23-refactor_paths_replace_lemondropdown_with_popover_in_pathnodecard
branch
from
2cb70a5 to
a6a35f9
Compare
Contributor
|
Size Change: +816 B (0%) Total Size: 110 MB ℹ️ View Unchanged
|
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
Comment on lines
+28
to
+43
| const [isCardHovered, setIsCardHovered] = useState(false) | ||
| const [isPopoverHovered, setIsPopoverHovered] = useState(false) | ||
| const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null) | ||
|
|
||
| const showPopover = isCardHovered || isPopoverHovered | ||
|
|
||
| const clearHideTimeout = (): void => { | ||
| if (hideTimeoutRef.current) { | ||
| clearTimeout(hideTimeoutRef.current) | ||
| hideTimeoutRef.current = null | ||
| } | ||
| } | ||
|
|
||
| const scheduleHide = (setter: (v: boolean) => void): void => { | ||
| hideTimeoutRef.current = setTimeout(() => setter(false), 100) | ||
| } |
Contributor
There was a problem hiding this comment.
Memory leak: The timeout is never cleaned up when the component unmounts. If the component unmounts while hideTimeoutRef.current has a pending timeout, it will attempt to call setState on an unmounted component, causing a memory leak and potential errors.
Fix: Add a cleanup effect:
useEffect(() => {
return () => {
clearHideTimeout()
}
}, [])
Suggested change
| const [isCardHovered, setIsCardHovered] = useState(false) | |
| const [isPopoverHovered, setIsPopoverHovered] = useState(false) | |
| const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null) | |
| const showPopover = isCardHovered || isPopoverHovered | |
| const clearHideTimeout = (): void => { | |
| if (hideTimeoutRef.current) { | |
| clearTimeout(hideTimeoutRef.current) | |
| hideTimeoutRef.current = null | |
| } | |
| } | |
| const scheduleHide = (setter: (v: boolean) => void): void => { | |
| hideTimeoutRef.current = setTimeout(() => setter(false), 100) | |
| } | |
| const [isCardHovered, setIsCardHovered] = useState(false) | |
| const [isPopoverHovered, setIsPopoverHovered] = useState(false) | |
| const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null) | |
| const showPopover = isCardHovered || isPopoverHovered | |
| const clearHideTimeout = (): void => { | |
| if (hideTimeoutRef.current) { | |
| clearTimeout(hideTimeoutRef.current) | |
| hideTimeoutRef.current = null | |
| } | |
| } | |
| const scheduleHide = (setter: (v: boolean) => void): void => { | |
| hideTimeoutRef.current = setTimeout(() => setter(false), 100) | |
| } | |
| useEffect(() => { | |
| return () => { | |
| clearHideTimeout() | |
| } | |
| }, []) | |
Spotted by Graphite
Is this helpful? React 👍 or 👎 to let us know.
Contributor
|
🎭 Playwright report · View test results → ❌ 2 failed tests:
If your changes intentionally update screenshots: add the These issues are not necessarily caused by your changes. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Changes
How did you test this code?
👉 Stay up-to-date with PostHog coding conventions for a smoother review.
Publish to changelog?
Docs update