-
Notifications
You must be signed in to change notification settings - Fork 180
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(app): Fix dropdown menu open direction issue #15091
fix(app): Fix dropdown menu open direction issue #15091
Conversation
add a function to detect the open direction for dropdown menu close RQA-
window.removeEventListener('resize', handlePositionCalculation) | ||
window.removeEventListener('scroll', handlePositionCalculation) | ||
} | ||
}, [filterOptions.length]) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good but I think we may want to change the dependency array to include the available height? In testing, I zoomed such that the menu should pop up on top and it looks good. But then, if you zoom out such that there is room for the menu to pop up on bottom, it still pops up on top.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
added window.innerHeight
since availableHeight is a local var but windw.innerHeight change has an impact on the calc.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think about this?
setDropdownPosition(
dropdownBottom > availableHeight &&
window.innerHeight < availableHeight
? 'top'
: 'bottom'
)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ncdiehl11
updated. thank you for your help!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
working as expected 🤝
Overview
add open direction to dropdown menu
close RQA-2662
Test Plan
run RTP protocol and try to open dropdown menus
Changelog
Review requests
Risk assessment
low