From bbd602a29701b2329c9cf56e60c716b8eddb4c11 Mon Sep 17 00:00:00 2001 From: chamikaJ Date: Wed, 25 Jun 2025 15:43:24 +0530 Subject: [PATCH] feat(assignee-selector, labels-selector): improve dropdown visibility handling - Enhanced dropdown behavior by checking button visibility in the viewport before updating position. - Added logic to hide the dropdown if the button is not visible, improving user experience during scrolling. --- .../src/components/AssigneeSelector.tsx | 15 ++++++++++++++- .../src/components/LabelsSelector.tsx | 15 ++++++++++++++- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/worklenz-frontend/src/components/AssigneeSelector.tsx b/worklenz-frontend/src/components/AssigneeSelector.tsx index a2174678..a609f523 100644 --- a/worklenz-frontend/src/components/AssigneeSelector.tsx +++ b/worklenz-frontend/src/components/AssigneeSelector.tsx @@ -63,7 +63,20 @@ const AssigneeSelector: React.FC = ({ const handleScroll = () => { if (isOpen) { - updateDropdownPosition(); + // Check if the button is still visible in the viewport + if (buttonRef.current) { + const rect = buttonRef.current.getBoundingClientRect(); + const isVisible = rect.top >= 0 && rect.left >= 0 && + rect.bottom <= window.innerHeight && + rect.right <= window.innerWidth; + + if (isVisible) { + updateDropdownPosition(); + } else { + // Hide dropdown if button is not visible + setIsOpen(false); + } + } } }; diff --git a/worklenz-frontend/src/components/LabelsSelector.tsx b/worklenz-frontend/src/components/LabelsSelector.tsx index 30df5b19..bb5f88ad 100644 --- a/worklenz-frontend/src/components/LabelsSelector.tsx +++ b/worklenz-frontend/src/components/LabelsSelector.tsx @@ -58,7 +58,20 @@ const LabelsSelector: React.FC = ({ const handleScroll = () => { if (isOpen) { - updateDropdownPosition(); + // Check if the button is still visible in the viewport + if (buttonRef.current) { + const rect = buttonRef.current.getBoundingClientRect(); + const isVisible = rect.top >= 0 && rect.left >= 0 && + rect.bottom <= window.innerHeight && + rect.right <= window.innerWidth; + + if (isVisible) { + updateDropdownPosition(); + } else { + // Hide dropdown if button is not visible + setIsOpen(false); + } + } } };