Home/Posts/Fluent-UI-Dropdown-Not-Clickable-Inside-Radix-Dialog-or-Sheet
Blog Post

Fluent UI Dropdown Not Clickable Inside Radix Dialog/Sheet

L
Lawrence

Fluent UI Dropdown Not Clickable Inside Radix Dialog/Sheet

This page is generated by AI "claude-4.5-sonnet"

Problem

When using a Fluent UI Dropdown component inside a Radix UI Dialog (or shadcn Sheet, which uses Radix Dialog under the hood), the dropdown menu becomes non-clickable. The dropdown appears to render correctly with proper z-index layering, but clicking on the options doesn't work.

Investigation

Initial Observations

  • Fluent UI Dropdown **works fine** when placed outside the Sheet
  • Fluent UI Dropdown **doesn't work** when placed inside the Sheet
  • The dropdown menu is visible and has a high z-index (`1000000`)
  • The Sheet overlay has a lower z-index (`50`)

Key Findings

Using browser DevTools, we discovered that the listbox element was inheriting `pointer-events: none` from the `` element:

text 
<body style="pointer-events: none;">
  └─ FluentProvider portal (pointer-events: none, inherited)
      └─ Listbox (pointer-events: none, inherited)
          └─ Options (pointer-events: none, inherited)

Root Cause

**Radix UI Dialog sets `pointer-events: none` as an inline style on the `` element** when the dialog is open. This is intentional behavior to prevent users from interacting with content behind the modal.

However, since `pointer-events` is an **inherited CSS property**, all children of `` inherit this value, including:

  • Fluent UI portals (even with `z-index: 1000000`)
  • Dropdown listboxes
  • Dropdown options

This creates a conflict where:

  1. Radix Dialog blocks all pointer events on `` to prevent background interaction
  2. Fluent UI renders its dropdown in a portal as a child of ``
  3. The dropdown inherits `pointer-events: none` and becomes non-clickable

Why the Dropdown Outside Sheet Works

When no Sheet is open:

  • `` doesn't have `pointer-events: none`
  • Fluent UI portals and dropdowns can receive pointer events normally
  • Everything works as expected

Solution

Override the inherited `pointer-events: none` by explicitly setting `pointer-events: auto` on Fluent UI components:

css 
/* Enable pointer events on FluentUI portals to allow clicking */
.fui-Portal {
  pointer-events: auto !important;
}

/* Enable pointer events on FluentUI listbox and options */
.fui-Listbox,
[role="listbox"],
[role="option"] {
  pointer-events: auto !important;
}

Why This Works

The `!important` flag ensures these rules override the inherited `pointer-events: none` from ``. By explicitly setting `pointer-events: auto` on:

  • `.fui-Portal`: The FluentProvider portal container
  • `.fui-Listbox`, `[role="listbox"]`, `[role="option"]`: The dropdown menu and its options

We restore interactivity to the Fluent UI components while keeping the Radix Dialog's background-blocking behavior intact.

Complete Fix

Add this to your global CSS file (e.g., `index.css`):

css 
/* Fix FluentUI Dropdown z-index to work inside Radix Sheet */
/* FluentUI portals need higher z-index than Sheet (z-50) */
[class*="fui-"] {
  position: relative;
}

.fui-Portal,
.fui-Listbox,
[role="listbox"],
.fui-Dropdown__listbox {
  z-index: 9999 !important;
}

/* Enable pointer events on FluentUI portals to allow clicking */
.fui-Portal {
  pointer-events: auto !important;
}

/* Enable pointer events on FluentUI listbox and options */
.fui-Listbox,
[role="listbox"],
[role="option"] {
  pointer-events: auto !important;
}

/* Ensure FluentUI popover surfaces are above Sheet overlay */
.fui-PopoverSurface {
  z-index: 9999 !important;
}

Lessons Learned

  1. **CSS Inheritance**: `pointer-events` is an inherited property, which can cause unexpected issues when combining UI libraries
  2. **Modal Behavior**: Modal/Dialog libraries often set `pointer-events: none` on `` to prevent background interaction
  3. **Portal Conflicts**: Components that render in portals (as children of ``) can inherit unwanted styles from the body element
  4. **Cross-Library Compatibility**: When mixing UI libraries (Radix + Fluent UI), always test for CSS inheritance and z-index conflicts

Related Issues

This issue affects:

  • Fluent UI Dropdown, Combobox, Select components inside Radix Dialog
  • Any Fluent UI component that renders in a portal inside a Radix Dialog
  • shadcn/ui Sheet component (which uses Radix Dialog) with Fluent UI components

References

  • [MDN: pointer-events property](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)
  • [Radix UI Dialog Documentation](https://www.radix-ui.com/primitives/docs/components/dialog)
  • [Fluent UI React Components](https://react.fluentui.dev/)