<Select/> `base-select` component is unresponsive when used inside a `Drawer` component

[WuChenDi]

Description

When using the base-select component (@base-ui-components/react/select) inside a Drawer component (from shadcn/ui), clicking the Select trigger has no response and the dropdown list does not open.
However, in the same scenario, the shadcn/ui Select component (which uses @radix-ui/react-select) works perfectly fine.

Steps to Reproduce

1. Open the page containing the Drawer.
2. Click the button to open the Drawer.
3. Click on the base-select component located inside the Drawer.

Expected Behavior

Clicking the Select trigger should open the dropdown list.

Actual Behavior

Clicking the Select trigger has no effect; the component is unresponsive.

Reproduction Repository

🔗 https://github.com/cdLab996/reui-base-select-bug

Live Demo

🔗 https://reui-base-select-bug.vercel.app/

Additional Notes

• The shadcn/ui Select component (based on Radix UI) works correctly in the exact same environment, suggesting a potential compatibility issue between base-ui and the event handling/focus trapping mechanism of the Drawer.

[WuChenDi]

Root Cause: Z-Index Conflict

Testing confirmed that the z-50 style applied to the Drawer component caused context stacking issues. The SelectPositioner's default z-index was insufficiently high, resulting in the dropdown list triggering but being obscured by the Drawer layer.

Recommendation: Force z-50 in the SelectPositioner's styles to ensure it displays correctly above the Drawer.

Note: Hard-coding values in code is generally considered poor practice.