IMLC
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 <body> to prevent background interaction
  2. Fluent UI renders its dropdown in a portal as a child of <body>
  3. The dropdown inherits pointer-events: none and becomes non-clickable

Why the Dropdown Outside Sheet Works

When no Sheet is open:

  • <body> 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 <body> to prevent background interaction
  3. Portal Conflicts: Components that render in portals (as children of <body>) 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