Skip to content

Feature/dropdown in modal #716

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

Daviti-Gogniashvili
Copy link

Implemented robust modal positioning system for phone input dropdown to prevent overflow issues and ensure proper visibility across different viewport sizes and scroll positions

Changes:

  • Added dynamic modal positioning that calculates optimal placement (above/below input)
  • Implemented window resize handling with debounced recalculation
  • Added two-phase positioning: initial estimates followed by precise positioning after render
  • Enhanced dropdown state management to track modal position
  • Added proper cleanup to prevent body overflow and state loops

Technical Details:

  • Uses getBoundingClientRect() for accurate viewport positioning
  • Handles edge cases: viewport boundaries, insufficient space, window resize
  • Prevents layout shifts with immediate initial positioning
  • Maintains performance with debounced resize events (100ms)
  • Safe cleanup on component unmount and all dropdown close scenarios

@Daviti-Gogniashvili Daviti-Gogniashvili marked this pull request as draft June 12, 2025 15:11
@Daviti-Gogniashvili Daviti-Gogniashvili marked this pull request as ready for review June 12, 2025 15:12
@Daviti-Gogniashvili
Copy link
Author

@bl00mber pls this feature is must have as simple dropdown causes overflow issues and layout shifts in dialogs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant