rx.select not working properly inside rx.drawer

[TimChild]

Describe the bug A clear and concise description of what the bug is.

Since reflex 0.7 the rx.select component does not work properly within an rx.drawer popver. The behavior has changed a few times since 0.7 (see examples below), so I'd guess it's related to the react 19 update.

To Reproduce Steps to reproduce the behavior:

import reflex as rx


@rx.page(route="/drawer_select_issue", title="Select not working in drawer")
def index() -> rx.Component:
    return rx.container(
        rx.drawer.root(
            rx.drawer.trigger(rx.button("Open Drawer")),
            rx.drawer.overlay(z_index="5"),
            rx.drawer.portal(
                rx.drawer.content(
                    rx.flex(
                        rx.drawer.close(rx.box(rx.button("Close"))),
                        rx.select(["a", "b", "c"]),
                    ),
                    background_color="#FFF",
                    width="20em",
                ),
            ),
            direction="left",
        ),
    )

• Code/Link to Repo:

Expected behavior A clear and concise description of what you expected to happen.

Expect the rx.select component to work normally within the rx.drawer popover.

Screenshots If applicable, add screenshots to help explain your problem.

The links are short videos (unfortunately my mouse isn't captured in the videos, but in each case I try to hover over each selection before selecting one).

reflex==0.7.0 -- Sometimes see a recursion error when clicking a few times on different selections.

reflex==0.7.1 Highlighting of the select options only works the first time after the drawer is opened. https://github.com/user-attachments/assets/de94334e-d1ec-4f4f-8b65-fa1eda165fcc

reflex==0.7.2 - 0.7.3 Only works if the very top of the selection is clicked, otherwise just blinks up for a second then disappears. https://github.com/user-attachments/assets/b88ab4a8-29d7-47b0-84c8-ca9f92c5a8aa

Specifics (please complete the following information):

• Python Version: 3.13
• Reflex Version: 0.7+
• OS: Linux
• Browser (Optional): Firefox

Additional context Add any other context about the problem here.

[linear[bot]]

ENG-5174 rx.select not working properly inside rx.drawer

[adhami3310]

this seems a problem in vaul/@radix-ui, i encourage you to post the bug there, as for mitigations, it seems that setting handle_only=True, stops the weird issue from happening, but that's likely undesirable

[TimChild]

@adhami3310 -- Thanks for the handle_only=True in the drawer.root suggestion. That does seem to fix the issue, but as expected means the drawer is not draggable (except by drawer.handle)

While trying that out and digging a little deeper I found a better solution.

rx.select([...], position="popper") -- That seems to fully address the issue I had while retaining the default drag behavior.

That solution was partly inspired by this comment: https://github.com/emilkowalski/vaul/issues/301#issuecomment-2386688087

Where the suggestion was to use a div within the drawer content as the popover container of the select -- However, it seems like reflex doesn't have the Radix Select Portal wrapped? -- Anyway, that led me to the popper solution.

[adhami3310]

thanks for the investigations! i will look into it more later to see if we can wrap things/change our default code

[TimChild]

I've also made a PR to reflex-web (https://github.com/reflex-dev/reflex-web/pull/1245) with a short example of using a Select within a Drawer in case you want to just include that.

[adhami3310]

@TimChild is there any downside to just defaulting to position=popper?

[TimChild]

@adhami3310 , The item-aligned behavior is a bit nicer in my opinion... See difference below:

item-aligned

popper

^ I.e. the left select is set with popper and right with item-aligned...

So I actually realize now that the solution of using "popper" is really just a workaround, not a solution... I didn't realize it actually affected the appearance until doing that test just now.