Skip to content

fix(drive-integration): multiselect popover misalignment when list is not scrollable [INTEG-4038]#10996

Open
Franco Banfi (FBanfi) wants to merge 2 commits into
drive-integration-v1.1from
fix/drive-integration-multiselect-portal-alignment
Open

fix(drive-integration): multiselect popover misalignment when list is not scrollable [INTEG-4038]#10996
Franco Banfi (FBanfi) wants to merge 2 commits into
drive-integration-v1.1from
fix/drive-integration-multiselect-portal-alignment

Conversation

@FBanfi
Copy link
Copy Markdown
Collaborator

@FBanfi Franco Banfi (FBanfi) commented May 21, 2026

Purpose

When a search query filters the multiselect list short enough that it is no longer scrollable, the popover portal loses alignment with the trigger input. The previous reflow hack relied on nudging scrollTop to trigger a scroll event — but when maxScroll === 0, no scroll event fires and Floating UI never repositions.

Approach

Replace the scroll-nudge trick in useMultiselectScrollReflow with window.dispatchEvent(new Event('resize')). Floating UI's autoUpdate subscribes to window resize events by default, so this always triggers a position recalculation regardless of list height. The fix is simpler, more robust, and applies uniformly to all three consumers of the hook:

  • step_2/ContentTypePickerModal.tsx
  • step_3/SelectTabsModal.tsx
  • review/mapping/edit-modals/FieldSelectionDropdown.tsx

Testing steps

  1. Open the Drive Integration page app
  2. Open the content type picker modal (step 2)
  3. Type a search query that narrows the list to a few items (non-scrollable)
  4. Select an item — verify the popover stays aligned with the input
  5. Clear the search and repeat with a full-length scrollable list — verify alignment still holds
  6. Repeat steps 2–5 on the tab selection modal (step 3) and the field selection dropdown in the mapping review screen

Before:

Grabacion.de.pantalla.2026-05-20.a.la.s.3.34.07.p.m.mov

Now:

Grabacion.de.pantalla.2026-05-21.a.la.s.11.43.15.a.m.mov

Breaking Changes

No.

Dependencies and/or References

Link to INTEG-4038

Deployment

No.

🤖 Co-authored with Claude Code

Franco Banfi (FBanfi) and others added 2 commits May 21, 2026 11:05
…s not scrollable

When a search query filters the list short enough that maxScroll is 0, the
scroll-nudge trick produces no scroll event, so Floating UI never repositions
the popover and the portal appears misaligned. Fall back to dispatching a
window resize event, which autoUpdate listens to by default.

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
@FBanfi Franco Banfi (FBanfi) changed the title fix(drive-integration): fix multiselect popover misalignment when list is not scrollable fix(drive-integration): fix multiselect popover misalignment when list is not scrollable [INTEG-4038] May 21, 2026
@FBanfi Franco Banfi (FBanfi) changed the title fix(drive-integration): fix multiselect popover misalignment when list is not scrollable [INTEG-4038] fix(drive-integration): multiselect popover misalignment when list is not scrollable [INTEG-4038] May 21, 2026
@FBanfi Franco Banfi (FBanfi) marked this pull request as ready for review May 21, 2026 14:49
@FBanfi Franco Banfi (FBanfi) requested review from a team as code owners May 21, 2026 14:49
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