Fix/calendar dropdown reposition on scroll - #5197
Open
dheena017 wants to merge 4 commits into
Open
Conversation
- Add scroll event listeners to popper action to update dropdown position when scrolling - Track all scrollable parent elements and listen to their scroll events - Enable autoReposition prop for DateTimeInput and DatePicker components - Ensures calendar dropdown repositions smoothly when scrolling through records table Fixes issue where calendar dropdown would stick to one position instead of following the input field during scrolling.
…-reposition-on-scroll
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
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.
Fixes #5168
This pull request resolves a UI issue where the Date Picker calendar popover becomes detached from its anchor input field when the user scrolls the page or the record selector container. Previously, the calendar remained fixed at its original screen coordinates, overlapping unrelated elements.
This fix ensures the calendar popover is dynamically anchored to the date input field. If the container scrolls, the calendar now repositions itself to maintain alignment with the input.
Technical details
Scroll Event Listeners: Added scroll event listeners to the popper action logic.
Parent Tracking: Implemented logic to track all scrollable parent elements relative to the anchor point.
Auto-Repositioning: Enabled the autoReposition prop for DateTimeInput and DatePicker components.
Performance: Ensures the calendar dropdown repositions efficiently when scrolling through the records table without significant layout thrashing.
Screenshots
Checklist
Update index.md).developbranch of the repositoryvisible errors.
Developer Certificate of Origin
Developer Certificate of Origin