reflex icon indicating copy to clipboard operation
reflex copied to clipboard

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

Open a0s opened this issue 1 year ago β€’ 2 comments

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):

  • Python Version: Python 3.12.2 (main, Mar 1 2024, 00:03:52) [Clang 15.0.0 (clang-1500.1.0.2.5)] on darwin
  • Reflex Version: 0.4.6
  • OS: MaxOS
  • Browser (Optional): Brave

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)
)

a0s avatar Apr 02 '24 16:04 a0s

Thanks for reporting

Alek99 avatar Apr 04 '24 23:04 Alek99