Join the Webstudio community

Updated 6 months ago

radix popover - form submission

At a glance

The community member is having an issue with using the Radix popover component with a form inside it. They have tried their own example and the Suprabased authentication example, but are unsure if they are missing a setting. Other community members have provided some suggestions:

One community member asked for more details on the exact problem and requested a builder link. Another community member provided a link to an example where the expected behavior is to click a button to open the popover contents (a login form) and be able to submit the form, but it seems to get caught on toLowerCase (at least in the console).

Another community member suggested that if the form is pulled outside of the Radix popover, it can then be submitted. A different community member created a minimal version of the issue and found that the minimal version does not have the issue, so they suspect custom code is causing the problem. They recommended trying to remove things to see what's causing the issue.

Finally, a community member asked how to create a button that closes either the Radix popover or the dialog box, as they couldn't see anything on the existing buttons in the component. Another community member noted that the dialog has a close button, but the popover should have one as well.

An issue was created for the popover

Useful resources
having an issue with using the radix popover with a form inside of it. I have tried my own example but i also tried it with the suprabased authentication example as well. Is there some setting i'm missing? Anyone have experience using this component?
J
b
O
7 comments
Cant help you if I dont know what the problem is. Please share

  1. what the exact problem is
  2. a builder link
this is a link to an example. expected behaviour would be to click the button open the popover contents (which in this case is a login form) and be able to submit the form.
seems to get caught on toLowerCase (at least in the console)
https://apps.webstudio.is/builder/9f217c9f-2107-4bac-a704-aec65d19af82?authToken=2b33cc77-beba-4904-9521-544a521f7292&mode=preview
if you pull the form outside of the radix popover you can then submit the form
I created a minimal version of this to narrow down the issue. Minimal version does not have the issue so I suspect custom code at play is messing it up. Try removing things to see what's causing the issue. Btw when i tried the login form, nothing happened, including no error in the console.

Here's my minmal attemtp at reproduction

https://playground-r7uu4.wstd.io/login?
how do i create that button that closes either the radix popover or the dialog box. i can't see anything on the existing buttons in the component
dialog has one, but popover should have one indeed
Attachment
image.png
Add a reply
Sign up and join the conversation on Discord