bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(assignee-selector, labels-selector): improve dropdown visibility handling

Browse Source 
- 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.
This commit is contained in:
chamikaJ
2025-06-25 15:43:24 +05:30
parent df2a40b861
commit bbd602a297
2 changed files with 28 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
worklenz-frontend/src/components/AssigneeSelector.tsx
View File

@@ -63,7 +63,20 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
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);
}
}
}
};

15
worklenz-frontend/src/components/LabelsSelector.tsx
View File

@@ -58,7 +58,20 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
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);
}
}
}
};