Skip to content

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