reflex-dev / reflex

🕸️ Web apps in pure Python 🐍
https://reflex.dev
Apache License 2.0
17.95k stars 994 forks source link

rx.popover doesn't work when rx.button has dynamic title #2987

Open a0s opened 3 months ago

a0s commented 3 months ago

Describe the bug Button is not working (not clicking)

To Reproduce

class Index2State(rx.State):
    language: str = "EN"

def index() -> rx.Component:
    return rx.popover.root(
        rx.popover.trigger(
            rx.button(Index2State.language),
        ),
        rx.popover.content(
            rx.text('Success')
        )
    )

app = rx.App()
app.add_page(index)

Expected behavior It should open popup.

Specifics (please complete the following information):

Additional context Log appears in dev console:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `SlotClone`.
    at Button_72566cc16c59292b34c0642621ec14fd (webpack-internal:///./pages/index.js:42:82)
    at eval (webpack-internal:///./node_modules/@radix-ui/react-slot/dist/index.mjs:46:23)
    at eval (webpack-internal:///./node_modules/@radix-ui/react-slot/dist/index.mjs:20:23)
    at eval (webpack-internal:///./node_modules/@radix-ui/react-primitive/dist/index.mjs:44:26)
    at eval (webpack-internal:///./node_modules/@radix-ui/react-slot/dist/index.mjs:46:23)
    at eval (webpack-internal:///./node_modules/@radix-ui/react-slot/dist/index.mjs:20:23)
    at eval (webpack-internal:///./node_modules/@radix-ui/react-primitive/dist/index.mjs:44:26)
    at eval (webpack-internal:///./node_modules/@radix-ui/react-popper/dist/index.mjs:78:28)
    at eval (webpack-internal:///./node_modules/@radix-ui/react-popover/dist/index.mjs:139:29)
    at PopoverTrigger
    at Provider (webpack-internal:///./node_modules/@radix-ui/react-context/dist/index.mjs:47:28)
    at Provider (webpack-internal:///./node_modules/@radix-ui/react-context/dist/index.mjs:47:28)
    at $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 (webpack-internal:///./node_modules/@radix-ui/react-popper/dist/index.mjs:63:28)
    at $cb5cc270b50c6fcd$export$5b6b19405a83ff9d (webpack-internal:///./node_modules/@radix-ui/react-popover/dist/index.mjs:81:29)
    at PopoverRoot
    at Component
    at EventLoopProvider (webpack-internal:///./utils/context.js:158:11)
    at StateProvider (webpack-internal:///./utils/context.js:181:11)
    at div
    at eval (webpack-internal:///./node_modules/@radix-ui/themes/dist/esm/theme.js:83:56)
    at eval (webpack-internal:///./node_modules/@radix-ui/themes/dist/esm/theme.js:43:25)
    at $f631663db3294ace$export$c760c09fdd558351 (webpack-internal:///./node_modules/@radix-ui/react-direction/dist/index.mjs:15:18)
    at Provider (webpack-internal:///./node_modules/@radix-ui/react-context/dist/index.mjs:47:28)
    at $a093c7e1ec25a057$export$f78649fb9ca566b8 (webpack-internal:///./node_modules/@radix-ui/react-tooltip/dist/index.mjs:72:29)
    at eval (webpack-internal:///./node_modules/@radix-ui/themes/dist/esm/theme.js:32:56)
    at eval (webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-c39617d8.browser.esm.js:60:66)
    at RadixThemesColorModeProvider (webpack-internal:///./components/reflex/radix_themes_color_mode_provider.js:17:11)
    at AppWrap (webpack-internal:///./pages/_app.js:27:11)
    at f (webpack-internal:///./node_modules/next-themes/dist/index.module.js:8:597)
    at $ (webpack-internal:///./node_modules/next-themes/dist/index.module.js:8:348)
    at MyApp (webpack-internal:///./pages/_app.js:55:11)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:79:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:5391)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:7787)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:79:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:183:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:397:11)

UPD: This works good:

rx.button(
    rx.text(Index2State.language)
)
Alek99 commented 3 months ago

Thanks for reporting