[GIT-353] fix(ui): anchor portaled CustomSelect and CustomSearchSelect dropdowns correctly

[shivbera18]

Fixes #9886

Description

In packages/ui, CustomSelect and CustomSearchSelect placed ref={setPopperElement}, style={styles.popper}, and {...attributes.popper} on an inner <div> wrapper inside <Combobox.Options as="ul">.

Following the @headlessui/react v2 upgrade, <Combobox.Options> intercepts direct children, injects role="none", and clones children without propagating inner callback refs. As a result:

• setPopperElement was never called with the mounted DOM node, leaving popperElement as null.
• React-Popper never initialized an active Popper instance (popperInstanceRef.current remained null), leaving the portaled menu positioned at default fallback coordinates (position: fixed; left: 0px; top: 0px).
• When portaled into document.body from transformed containers (such as ModalCore or Propel DialogPanel using CSS transforms), strategy: "fixed" is required to anchor relative to the viewport.
• Chrome's native focus ring outline was displayed on the trigger buttons and the portaled listbox upon focus.

Changes made:

• Attached ref={setPopperElement}, style={styles.popper}, {...attributes.popper}, and container styling directly to <Combobox.Options as="ul">, eliminating the intermediate wrapper <div>.
• Added static to <Combobox.Options> in CustomSelect to keep options mounted under the outer isOpen && createPortal(...) guard.
• Added strategy: "fixed" to usePopper in both components to properly anchor portaled dropdowns inside transformed dialogs.
• Added outline-none to trigger buttons and <Combobox.Options> to suppress browser default focus rings.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Screenshots and Media (if applicable)

Fixed: Workspace Settings - Invite Modal Role Selector

Fixed: Workspace Settings - Members List Role Selector

Test Scenarios

1. Navigate to <workspaceSlug>/settings/members.
2. Click Add member / Invite people to collaborate to open the invitation modal.
3. In any invite row, click the role selector (Guest / Member / Admin) -> verify the dropdown menu anchors directly below the button without viewport detachment.
4. On the members table, click the role selector for any member -> verify the dropdown menu opens directly below the row trigger.
5. Verify dropdown closing on outside click, option selection, and keyboard navigation (Escape, Enter).

References

• Fixes [bug]: Invite role dropdown opens in top-left corner instead of below the field #9886
• GIT-353

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[CLAassistant]

All committers have signed the CLA.

[makeplane]

Linked to Plane Work Item(s)

• (GIT-353) [bug]: Invite role dropdown opens in top-left corner instead of below the field

This comment was auto-generated by Plane

[shivbera18]

Closing this draft PR as the issue is already resolved on preview by #9802 (commit b2ccc7325e), which replaced the legacy @plane/ui Select components with the new @plane/blocks/select engine.